Reading Materials For OOCSS, BEM And SMACSS

After all these years of web development I still haven't found a compelling way to organize and name css, once we all seemed to agree with the semantic naming methodology but as the project grows the magic aura disappears.

Recently my team has started the transition to apply OOCSS, SMACSS and BEM techniques to current project. I tried it a while and really think this is the best way so far to cleanly organize your css(code and files), make it scalable and reusable, with simple intuitive naming methomelodgy.

Recommendations

Here are the reading materials I found pretty easy to follow:

Organizing CSS: OOCSS, SMACSS, and BEM - MattStauffer.co

High level introduction to each terms, with simple example. Read it and you'll get the big picture.

MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

Have an excellent guide on when to use BEM and not.

The Pros and Cons of Modular Sass — Planet Argon Blog

Great article on the idea behind modular css in general. And the argument over semantic class names convinced me.

Semantic markup is important in communicating the meaning of a webpage and is only becoming increasingly important; however, class names are for the developer. The exception to this relates to the use of microformats, in which case it is necessary to use specific semantic class names. It’s always important to consider names and what they communicate to you, your team, and future developers, but there is no dogmatic reason to avoid classes like “grid-1” or “pull-left” just because they describe presentation. People have conflated the use of semantic HTML (which relates to optimizing content for assistive technologies, browsers, the multitude of devices, and software that recontextualizes and reframes your content) with avoiding presentational class names for years, and I’m not quite sure why.

Support for BEM modules in Sass 3.3 | Mike Fowler

How to write BEM in Sass.

Full Stack Radio - 1: Matt Stauffer - CSS Semantics

A podcast. You'll get more out of it if you already some idea and experience about these terms, as in the podcast there're deep discussions on the very details of daily development.

That's it. Hope this could help you find your starting point.