CSS Repetition: It’s Basically Whack-A-Mole

If you never repeat selectors in your stylesheet, you’ll repeat declarations. #

Pretty self-explanatory, this one. If you’ve got four selectors with a few shared properties and you’re set on not repeating selectors, you repeat all those property declarations.

If you never repeat declarations, you’ll repeat selectors. #

If I were going to try this, I’d build a bunch of Sass %placeholders (all pattern library style) and @extend them from all the appropriate selectors.

If you use single-function selectors, you’ll repeat classes throughout your HTML markup. #

This is the Bootstrap approach: all the visual styles you want to use from Bootstrap’s CSS require you to add classes to your markup.

So stop worrying about repetition. #

Browsers are just machines and we’ve got dozens of build tools to compress & minify our HTML/CSS/JS. Instead of pursuing the pipe dream of writing code as efficient as the computers that render it, let’s pursue code that we can maintain and edit for months to come. If we’re really that serious about avoiding repetition, we’d reduce our entire markup / CSS to single-character selectors, right? And if we could replace all the CSS properties with less-than-four-character abbreviations, we could save even more space! But I jest. We’re never going to do that – and we shouldn’t. We need to work hard at writing CSS that we (and our teammates) can update, change, and maintain easily.

I’m not going to tell you how to write maintainable code: you & your team know your unique constraints much better than I ever will. I will say this: having dipped my toes in BEM, SMACSS, & OOCSS, I’m leaning toward mixing a flavor of BEM with Heydon Pickering’s “Semantic CSS with Intelligent Selectors” at the moment.