BEM should not exist

There is a lot of reasons for not using this methodology, but because of its simplicity and misunderstanding of work of HTML and CSS, this methodology has spread wildly among frontend developers around the world; in most cases among developers from CIS countries. BEM is used now in large Russian-language projects (Yandex, Habr) and in several frameworks (react-md). In this article, a detailed review of the pros and cons of this development approach will be conducted. All examples will be shown from the official BEM site.

Acronym “BEM” — block/element/modifier. Every design or layout can be visually parted on blocks, for example — sidebar. Each block can contain one or several elements. Elements can have modifiers of states (active, disabled),additional classes for changes of borders, width, colors, etc. The idea of separating design into visual blocks isn’t new, what BEM offers is to make class names longer, always make elements dependable from block title and declare all classes globally. It literally helps nothing and leads to sad consequences in project markups. Below mentioned are all issues in BEM usage:

Unreadable HTML

This is a markup from the official BEM site. Prolonged and PHP-like name classes making any markup unreadable mixed with attributes:

The markup shown below is an example for one without inheritancein class name the title of parent block, modifiers bound to main class by inheritance in SASS, not in HTML class name:

Difficulties with modifiers inheritance

Any class in BEM — global, modifiers are not an exception. Where CSS offers to the main class, for example, a button to inherit several modifiers like “active, disabled, error” be BEM this classes will be global, inheriting in class name of a block title and element title. This approach is ignorance of CSS capabilities like cascade and prolongation of class names out of the blue:

An example of inheritance of modifiers through SASS, but not from words in class name:

All classes are pseudo-global. Basically, it’s not bad at all. The problem is that in the class name we save block or element names and cannot use them out of the block anywhere and the global nature of classes become useless. In addition, on a tab in the browser, we have global classes like “promo_section_color_white”, which can only change the background color of “promo_section” to white. For other blocks with the white background, you should write a new class with hardcode in the name. Elements cannot be used anywhere in the project, though this is technically possible:

Instead of binding to block by text in HTML, it can be done by truly global classes, reused on other sections and not lose a thing:

Prohibiting of semantic usage

This is a quote from the document:

You also shouldn’t use CSS tag or ID selectors when using BEM.

The usage of ID’s in CSS is doubtful, but why not tags? Such a big potential, where mixins or cycles can be used in preprocessors with semantic, but it was depreciated:

Here styles can be applied by h1, h2, etc., but instead of the link to HTML tags, we have class “article__heading_level_1“:

Implies markup only by blocks

Implies markup only by blocks. There is a lot of elements: buttons, dropdowns, titles, subtitles, sections, etc. in every big template. But in BEM you cannot reuse classes. If you want “article__heading_level_1” not in the article but with the same styles you will write the same styles, but with the new class or will inherit from other blocks “article__heading_level_1”. Basically, this is a prohibition of creating a full-fledged template, but not something more complex than a landing page.

Pros

One pro: it’s simpler to write code and you should not support it. If you writing CSS by BEM, the chance of changing styles in files is nearly zero. A code will be rewritten anyway if markup needs some edit because no one wants to read that.

BEM is destroying a concept of the template, prohibiting usage of CSS functions and possibilities, shoving developer to hardcode. Any good thoughts about BEM in comments, will be food for thought. All examples provided here — is a way it could be, not my own markup. Maybe I have even not saved semantic in some places. If criticizing, then suggest. I’m suggesting the architecture and idea of Bootstrap, SMACSS, and OOCSS.