As is known, BEM consists of blocks, elements and modifiers.

Take the blocks. They are offered to celebrate a separate class.

<div class="x-block> Всякий Π΄ΠΈΠ·Π°ΠΉΠ½ </div>

But the block is essentially a component, it can and should be set as a separate HTML element, as it has long been implemented in every Angular and React.

 <x-block> Всякий Π΄ΠΈΠ·Π°ΠΉΠ½ </x-block>

With elements of nothing interesting.

 <x-block> <x-block_element1> ВСкст </x-block_element1> <x-block_element2> Π•Ρ‰Π΅ тСкст </x-block_element2> </x-block>

But real joy comes with modifiers! After all, this is nothing but arguments. Instead of insane class constructions.

 <x-block> <!-- Для boolean ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² --> <x-block_element1 mod1>ВсякиС Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹</x-block_element1> <!-- Для ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ --> <x-block_element2 mod2="value">ΠšΡ€Π°ΠΉΠ½Π΅ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Π΅</x-block_element2> </x-block>

What's wrong with this approach? Why is it not used? I think BEM perfectly matches the ideas of ordinary tags. Maybe I do not know something? Maybe there are some problems with selectors?

  • 2
    Oh cool. Bam tag. - uhbif19

2 answers 2

It's simple: compatibility . With it, everything is very unreliable so far, the Custom Elements Specification is still in the status of working draft , and browsers are very poorly maintained.

And until this standard is adopted, HTML5, in fact, specifies a white list of valid elements, getting out of it means breaking the standard.

enter image description here

React only encapsulates constructs from "primitive elements" (which are specified in HTML5) and allows you to compose more complex HTML-like markup language (JSX) from them.

Theoretically, such a preprocessor can also be made for BEM, and I would not be surprised if it does exist, it’s just little known.

UPD: there is such a posthtml , as reported by @Guria , and in the same organization there is a polyhill posthtml-custom-elements .

  • events.yandex.ru/lib/talks/2132 - Nofate ♦
  • one
    Custom Elements is a little more than that. They are needed to define tags with the new behavior described in JS - as in Angular and React. - uhbif19
  • @ uhbif19 HTML5 violation in what tags can be in the context of what, just. This is an invalid markup. It can work, it is just not standardized, and therefore stable cannot be considered. - D-side
  • one
    @ uhbif19 of course, if you are developing something that will run on a limited number of implementations, you can only take them as a "reference implementation" and test their performance only on them. As in the case of Electron, where compatibility with Chromium is sufficient. Just do not be surprised if some Firefox suddenly starts to show a white screen instead of a site. He has every right to do that. - D-side
  • 2
    > Theoretically, for BEM such a preprocessor can also be made, and I would not be surprised if it does exist, it is simply not well known. See github.com/posthtml/posthtml-custom-elements - Guria

BEM also focused on maximizing performance. One class is very fast. One tag too. But attributes are much slower.

And so, by the very ideology of the problems I do not see.

More on the validity of markup - custom tags should contain a hyphen .

  • Yes it is. I do not know why I did not write. - uhbif19