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:
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
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:
/* 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:
/* 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?