Declaring grid layouts with ‘just’ CSS

CSS Grid Layout has been coming for a long time, browser support seems to be on its way (at last!). This is great news! It means we can soon use ‘just’ CSS to describe our lay-outs. But, arguably, this leaves us with a naming problem.

‘Just CSS’ vs classnames for lay-out

In the current situation, many lay-outs on the web work with a combination of classnames-for-layout-purposes and CSS to go with it. In the future, with CSS Grid Layout, classnames can just declare what a thing is. They then leave it to CSS entirely to describe how the thing is layed out. As Rachel Andrew points out in her recent 24 Ways article, this may mean the end of container, row and col-* type of classnames:

(…) my hope is that it will be the layout frameworks that tie our design to our markup. They have been a necessary placeholder while we waited for a true web layout system, but I believe that in a few years time we’ll be easily able to date a website to circa 2015 by seeing <div class="row"> or <div class="col-md-3"> in the markup.

CSS Grid Layout is awesome, because it would provide web page layout with a separation that the makers of the web always encouraged authors to follow:

• HTML is for what it is (structure)
• CSS is for what it looks like (style)

But I feel that this leaves us with a problem not easily solved: how can we sensibly sname page areas? In examples of Grid Layout, there is usually a header, main content, sidebar and a footer. In reality, there can be lots of different combinations of column widths. There are usually many variations, possibly more than we could possibly come up with classnames for.

Naming page areas

When using classnames-for-layout-purposes, page areas are defined by presentational classnames that do not require further naming. We just name the components inside the containers, and give their wrappers/containers presentational names to form a grid structure.

If we want to peruse the semantic classnames we have added to page areas to lay things out, we’ll need to give them sensible names. We can then apply grid CSS to each of them (and could do this reusably/automatically by clever preprocessor usage).

My argument is that coming up with such names could prove quite hard: what’s a thing called that has a 35% column and a 65% column, in which the latter column is divided into four? Arguably, names like col-6, or even col-md-6 are easier to work with (and yes, I’ve frowned upon them for long).

Making it easy to work with is probably what we are discussing here. It’s mostly an issue between developers, for the browser or user doesn’t experience what we call things. They can benefit from separation between semantic usages of HTML elements and separation of concerns generally, but classnames aren’t read out by screen readers (like a title attribute), used to construct the accessibility tree (like some attributes are) or linked to by users (like IDs).

Conclusion

So I think there are two views, really. Some will argue we should think of our grid as a system separate from the rest of a site’s front-end, and as a thing that we can leave for months without touching it. In this case, when regarded as a separate thing, presentational grid classnames are seen as okay. Others will say grid-structures should just arise from grid definitions that belong to each semantically classed component. Especially for those, CSS Grid Layout will make it a lot easier to do this.