Is separating layout styles from design atmosphere using data-layout good practice?

May 11th, 2012

I’ve been reading Jonathon Snook’s Scalable and Modular Architecture for CSS book this week. (It’s well written, practical and perfectly formatted for Kindle. I learned a lot and I’d highly recommend it.) In SMACSS, Jon recommends breaking down stylesheets into rules for:

Base
Layout
Module
State
Theme

He establishes a naming convention for these categories of styles. Jon says:

I like to use a prefix to differentiate between Layout, State, and Module Rules. For Layout, I use l- but layout- would work just as well. Using prefixes like grid- also provide enough clarity to separate layout styles from other styles.

I like this idea a lot because, 1; I’ve had a fascination with naming conventions, and 2; I’ve long had a problem with mixing styles for layout with styles for ‘atmosphere’ (colour, texture and typography,) something we’ve all done for years.

To me, using classes makes sense when we need to ‘classify’ items such as modules on a page. They make sense for groups of styles in a theme too. But it doesn’t make sense to me to use classes for the layout outline of a page, particularly when many times we add the elements they style purely for layout reasons and especially in a responsive context. It feels somehow messy.

Years ago, when oft-used browsers only supported element, class and id selectors, we didn’t have much choice. Now that browsers from Internet Explorer 7 up have solid support for CSS attribute selectors, we can bind our styles to elements based on their attributes. That’s why we’ve seen more and more people binding styles using ARIA role attributes. For example:

<div role="navigation">…</div>

[role="main"] {
/* styles */ }

Reading SMACSS got me thinking. Why not abstract layout styles even further than Jon suggested, by using HTML5’s data- attributes instead of classes. Something like:

<div data-layout="content">…</div>

[data-layout="content"] {
/* styles */ }

Conceptually, this fully separates styles for layout from every aspect of atmosphere. Although I’m aware that there are no practical advantages to using data-, to me it somehow feels cleaner.

I’m not 100% sure if this could be a legitimate use for data-. What are the experts’ opinion? I’d be interested in hearing if you’ve used this approach already and what you think might be the possible advantages and disadvantages?

Written by Andy Clarke .