I’m a bit confused as to how can I determine what is a Block and what is an Element in the BEM naming convention.
For instance, I have a row of products, and each product has image, title and price. So I realize that the products as one can be a block and each individual product can be an element. Yet when we go further down, it turns out that the product is a block as well, since it has other types of data. I end up with the following class naming:
This is exactly why I do not like BEM or other complicated naming conventions. In all the time you’ve spent debating over naming conventions, I’d be much further along in the project.
I just don’t like BEM because it results in class declarations that are so long they can wrap. And while they make it easier to understand what’s going on when you sit down and read them, BEM makes it very hard to skim or mentally process fast.
The important detail I see is that a block is supposed to be “a functionally independent page component,” and an element “can’t be used separately from [a block].” So, for example, would an item title make sense outside the context of a product? Probably not. Would a product make sense outside the context of a product list? Hmm, actually yeah. A product could be used separately without the parent entity (the list), so product is a block.
Yes, you’re right. I thought we were talking about a single class declaration in CSS, but of course if you have three of them on an HTML tag, then it’ll be longer.
That was more of what I was referring to. I really liked the idea of BEM, then I used it and hated it. I feel like one of those things that are really good idea in theory, but not in practice.
Either that or I’m just doing it totally wrong, which is entirely possible.
BEM is a really great naming convention for modular web design.
Try this slight alteration to the BEM syntax if you don’t like the length:
blockName__elementName.-modifierName
That’s how I’ve been using BEM and it’s been working really well.
The camel case makes it easier to see where the names start and end.
The modifier class loses the module name but that can be a strength. It makes the class accessible to other modules further down the tree, it means all the child elements of the modifier have easy access to the class using .-modifierName & { … } syntax in Sass and it makes the HTML FAR cleaner.
BEM in combination with SASS/SCSS or Stylus - whatever you prefer is awesome.
<article class="StandardArticle">
<header class="StandardArticle__header">
<h1>Blaaa</h1>
</header>
<div class="StandardArticle__body is--bold">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos repudiandae ullam ratione debitis ipsa non praesentium aperiam, tempora, ipsum ut sint voluptas possimus eius reprehenderit amet libero? Facilis, optio, maxime.
</p>
</div>
</article>