If it was not for the need to have a fallback for IE9 I would be using flexbox as standard, its a great feature with deals with so many of the common page layout issues, including vertical align.

Bootstrap is quite web focused still so I guess it will come when support for IE9 is not expected.

Though if you are doing an mobile/tablet only solution I would probably use flexbox only now. As long as you keep to the 2012 spec, you should be ok.

http://caniuse.com/#feat=flexbox

Bring on the death of IE9!!

Its bigger then li's it about an overall approach. In this use case, yes maybe its an overkill but in some cases its not and allows for quite a bit of flexibility to use the same styles across multiple element types.

I guess it's come about from trying to be more semantic within the documents.

Declaring Headings with classes is a good example as well.

    h1,
    .h1{
       font-size:20px;
    }

    h2,
    .h2{
       font-size:18px;
    }    

etc... This allows you to apply <h1> styles to <h3> or even <p>'s while still keeping the content semantically correct and designers happy.

Another few other common ones are

    strong,
    .strong{
        font-weight:600;
    }

    small,
    .small{
        text-size:10px;
    }

The same can go with .collection, somebody may want to use the styles on something thats not a list for example <div>'s.

It also does not really go against inheritance, themes like .collection-alt can still work.

Sometimes its an overkill and I don't always do it, but in some cases (heavily responsive sites) it has worked really well. Its also easier to work in a team with one approach, rather then just doing it for headings etc why not take the principle/standard across all styles.

A more extreme example of this is http://www.basscss.com/ where CSS classes are reusable and composable. E.g. a list could be:

    <ul class="list-reset">
      <li class="inline-block mr1 h4 border border-red">Half-Smoke</li>
      <li class="inline-block mr1 h4 border border-green">Kielbasa</li>
      <li class="inline-block mr1 h4 border border-blue">Bologna</li>
      <li class="inline-block mr1 h4 border border-yellow">Prosciutto</li>
   </ul>

It used to be the case and I think still is for a large case of mobile/tablet devices to just set font size on inputs to 16px.

I think with ios 8 this has changed.

How come with hear little or nothing about Apple having such a closed and restricted environment for iPhone. For example with payments having to go through them?