BEM improvement or "unnecessary"?

Question

css

I've been typing in BEM for over a year now. There is no point in talking about the merits of this methodology (I generally believe that it should be accepted by everyone as a standard in layout :). I want to draw attention to one annoying feature - verbosity. This is especially true for modifiers.
For example, here is a piece of normal markup - there is a row component with columns ("_c-row"), there are child elements ("__col"), and modifiers that change their size depending on the screen size ("--md-2-2")

<div class="_c-row">
  <div class="_c-row__col--1-2 _c-row__col--md-2-2">1</div>

It seems redundant to me to mention the _c-row__col component in each class (stupidly just because it's worth mentioning in every child class)
, so why not separate the --1-2 and --md-2-2 modifiers from the component name?
I was puzzled by such questions and got into our favorite social network vkon ... github. I reviewed a bunch of grids there and came across the BEMV concept . I liked the idea of ​​separating modifiers from components. Well, why not really use a separate .--tablet-size-50 class so that the block can be made 50% smaller? so as not to write every time

<div class="_c-row">
  <div class="_c-row__col _c-row__col--mobile-1-2 _c-row__col--tablet-2-2">1</div>

I propose to write

<div class="_c-row">
  <div class="_c-row__col --mobile-1-2 --tablet-2-2">1</div>

why not really separate modifiers from component names? Or in general (for example) declare all "grid" blocks in their scope in some thread - for example [data-layout="_c-row"]. What's bad about it?

Answer 1

The essence of BEM is not only in this naming, but also in the fact that you can take any block at any time, in any combination, and move it to another place and everything will work. No conflicts, no name collisions, no scope dependencies. This is his strength.
Well, the redundancy of the description is easily corrected by the assembly tools, which themselves will collect all these long names.
What you propose, of course, also has the right to exist. Use in your projects if it suits you.

Answer 2

This approach is called: "modifiers via extend."
If you do not write HTML by hand, this question becomes meaningless.
There is a risk of slipping into an imperative description of modifier names.
Increases the necessary qualifications of a specialist, in the practice of this approach, the need to understand "what I am doing and what the consequences may be" becomes especially critical.
There are practices of this campaign https://twitter.com/ihorzenich/status/776395453533...
This issue is periodically discussed on the BEM forum , you need to search.
I don't think there can be a clear answer to this question.

Answer 3

so why not separate the --1-2 and --md-2-2 modifiers from the component name?

Congratulations! You have invented a piece of rscss . It remains to try the rest of its parts, and, perhaps, in the expression
the word BEM will gradually fade into the background :)
PS: a class name cannot start with two hyphens.

Answer 4

maybe I misunderstood something, because your hyphens make your eyes run wide ... Semantics is still such a concept, by the way. But, how does your proposal differ from the concept of bem primisi?
And who is writing with his hands in 2017? Go google about pug and sass and how to assemble this whole story with gulp or webpack.

Answer 5

I've been doing this for two years now. No problems.