Originally published at: http://www.sitepoint.com/bem-smacss-advice-from-developers/
CSS methodologies can be mind bogglingly confusing and tough to decide upon. Let’s consider two of the most well known options: BEM and SMACSS.
Should you choose one of these for your next project? What are they best suited for? What might go wrong? If you’re already working with one – are you using it as intended? To the fullest potential? How do you know if you’re doing it right? I thought I’d be nice to ask people who’ve already been through those questions in their own projects and learn from their experiences.
I asked developers who’ve worked with BEM and/or SMACSS for their success stories, horror stories, advice, and words of caution. I gave some developers a whole list of questions and others just free-formed their thoughts to me. I’ve compiled the results into what I hope will be valuable reading for those considering optimizing their CSS.
For those new to BEM and SMACSS, I’ll start by giving a very high-level overview of what BEM and SMACSS are.
What is BEM?
BEM stands for Block Element Modifier and originated at Yandex. It provides a rather strict way to arrange your CSS classes into independent modules. There are a few variations on the idea but the most common one looks like this:
.block {} .block__element {} .block--modifier {} .block__element--modifier {}
A Block represents an object in your website. For example:
* a person * a login form * a menu * a search form
An Element is a component within the block that performs a particular function. It should only make sense in the context of its block. For example:
* a hand * a login button * a menu item * a search input field
A Modifier is how we represent the variations of a block. For example:
* a female person
* a condensed login form (e.g. we’re hiding the labels in one version)
* a menu modified to look differently for a footer or sitemap
* a search input field with a particular button style
In the example of our menu, the class names could look like this:
.menu {} .menu__item {} .menu__item--featured {} .menu--footer {}
There are other architectural principles and tools for BEM on the bem.info website, however, when developers discuss BEM, they’re often focused mainly on the naming convention above and that is true of the majority of the discussion below.
Continue reading this article on SitePoint