anti-patterns

Not too long ago an article on css anti-patterns surfaced, bringing up another selection of so-called smelly css code examples. Reading the article pretty much made my head spin. I think I'm guilty of willfully endorsing just about every anti-pattern mentioned there (the use of !important excluded). Now, I'm not going to write a lengthy article on why I think the author of the article is wrong and why this and that pattern should be used regardless of being considered an anti-pattern by some (you can check Chris Coyier's response, because I think there's a more important issue to talk about.

How come, in less than a year's time, my css code went from clean, solid and community-approved to a bag of smelly waste that shouldn't be allowed on the web? The answer is simple.

OOCSS

If you read the introduction it's clear that all of these anti-patterns are derived from the OOCSS methodology. In all honesty, the author went through great lengths to properly introduce the article, explaining how he came to his list of best practices. But the reality is different. It tells us that people still fail to get the context of these types of articles. In the end all that survives are the couple of simplistic rules that are stated, which are then used all over the web in comment threads to break apart other people's css.

OOCSS is not a best practice, it's a css-centric front-end development option that's feasible for a very small selection of projects. They try to sell it as the next best thing, but it only really works if you're working on a single, large project where you have good (if not excellent) control over the html and need to distribute control of the front-end over a large team of people. It's bloated for smaller projects and it's useless for deploying across different sites of a single client.

css-centric vs html-centric vs combined

The code above gives you an example of css-centric front-end code, assuming a news and event block that share the exact same styling. The thing with css-centric development is that it puts css at the core of front-end development. The obvious result is that html plays second violin and needs to adapt itself to what the css describes. It's a methodology that doesn't work without a design and has poor reuse options simply because no two designs are ever the same.

On the other side of the table we have html-centric development, which puts html at the core of front-end development, allowing us to reuse component over different sites, even clients. It does put a heavier burden on the css, especially when you forgo popular meta languages like less or sass.

You can also combine the two (fe use the class attribute for styling classes and use a data-class attribute for semantic/structural classes) and work with a convoluted mess where at least the base html (safe the classes) is reusable. You still need a lot of flexibility to keep up with design changes though.

conclusion

Whether you use ccs-centric or html-centric front-end development is really up to you, but when you advertise best practices it is crucial to clearly state to which philosophy they apply to, otherwise you're just preaching a bunch of nonsense to an audience that wants bullet-point information. Context has never been that crucial in defining our best practices and I'm disappointed to say that currently we are failing pretty hard to inform the people who are reading our articles.