I’m kinda confused, your argument against Bootstrap’s grid seems odd to me.

First of all, class attribute is meant to hook styles (and nowadays, scripts) from markup, so Bootstrap’s naming in markup is not a problem, even with separation of concern in mind. Class attribute is the bridge between markup and styles, the only HTML attribute that doesn’t imply anything in markup. Separation of concern, if religiously applied, should prohibit the use of class attribute since it mixes styles and markup. To sum up, describing grid with class name can’t be a problem.

The same argument can be used for containing div, since this a semantically neutral markup tag. The only thing we could blame when using too much div is that markup is harder to read. But that’s not bad practice at all. And moreover you don’t have to use div in order to use Bootstrap’s grid. Your take on semantic markup.

When you say “Grid and flexbox layouts do not need to be described in markup”, neither does a floating grid. This is just for convenience, to be easily understood by beginners. Tools like Susy (that you quote) proves it.

And moreover your counter-example are inappropriate, since they distinguished themselves from the Bootstrap’s example using :nth-child() selector — which had poor support when Bootstrap 3 was released, but we definetly can rewrite its grid using :nth-child() and removing some of the class names you point out.

However Bootstrap’s classes are meant to be reused anywhere, in any markup context, on any tag. This is why those classes are descriptive. Your examples are very contextuals and cannot be reused in another context. So which one is best?

Thus don’t you think we’ll see new frameworks like Bootstrap with reusable grid systems based on grid module? Some using flexbox are already there, and more are coming. And we’ll keep going with describing class names in markup. Because well, that’s not a problem.

I wrote a lot on this detail because I’m sad to read those kind of arguments in a such high level article. This is to easy and those things aren’t that simple.

However your demonstrations are very impressive, and probably some of the clearest I’ve read for now! I often use flexbox and am very enthusiastic about grids, hoping just as you that we’ll be able to use it very soon.

(Sorry for the very long comment and my hazardous english).

Hey Rachel, lovely article. I’ve been using flexbox over the last year in production, but only with the standards syntax and fall back to inline-block. The new grid spec looks amazing and I can’t wait to tinker with it.

Although I avoid using frameworks like Bootstrap and Foundation and generally prefer semantic class names without the overhead, I feel it’s important to mention that both Bootstrap and Foundation offer mixins for their grids to avoid the dreaded col and row classes. So it’s up to the user to choose them. In a large project I was working on recently, for a really big app, I started questioning the use of semantic classes, since the CSS files did get much larger with the repetitive grid mixins. Most grids don’t use more than four to six columns, so I do wonder whether it’s makes sense to actually have those col-sm-25 or col-md-6 classes, although I still don’t feel comfortable using them!
Thanks again for this inspiring article and comparison between both layouting methods, and I hope to delve more into grids this year :)