Hi Chernenko. Yes, two dashes are used for modifier classes. All examples in the article follow this pattern.

This may be a good topic of a future video on my site. Great work Jon.

Some principles are very similar to what you’re writing here. Very interesting for anyone interested in that topic. As I’m not a big fan of the BEM notation, I prefer to lay out things the way it’s done in this book (even if similar to BEM; I simply don’t like the double underscore/dash.. It’s personal, once again). Then it’s all down to how strict we are with ourselves I guess.

Nevertheless, interesting article! Thanks!

No worries Ivan!

I see what you mean, but it should be noted that block elements can contain other block elements. (for example: ‘media__item item’, ‘item’ is also a standalone block).

The purpose of the naming methodology is to show the relationship between parent and children clearly, which is something I find incredibly helpful with BEM. Again, it comes down to what works for you though.

Hello Jon! Thanks for your explanation! And my apologies if I rendered to be rude or something. The word “misused” is definitely wrong here.

My point is, as Marvin also mentioned, some devs just add whatever they need after __. As such, you__may__find__such__class–names sometimes :D

From my point of view, if something seems like a self standing thing, it ought to be split.

Thanks Neil!

My apologizes *Ivan.

Interesting point Evan, but I don’t think “misuse” would be accurate. It really comes down to what works best for you. Personally, I prefer seeing explicitly how children relate to the parent block. The relationship between block and element is clear (‘block__element’). This is part of the advantages of using a naming methodology such as BEM (or a modification of the syntax). The example you provided makes it seem like ‘media-info’ is a parent element and can exists on its own, which is misleading. I don’t mind ‘monolith’ because the naming makes the relationship of block, elements and modifiers very clear.

I’m a big fan of BEM as it’s easy to read and works great with several developers.

We use two hyphens for modifiers to avoid confusing elements that are hyphenated.

Getting fundamentals correct early on help the developers, project managers and finally the clients.

I’m in the same boat as you and your last example looks a lot cleaner and easier to extend. Way to many people try to copy the actual DOM structure in their selectors.

.media.media--slat
  .media__item
    img(src="...")
  .media__body
    .media__body-title
    .media__body-list
      .media__body-list-title
      .media__body-list-data

can become

.media.media--slat
  .media__item
    img(src="...")
  .media__body
    .media__title
    .media-info
      .media-info__title
      .media-info__data

Thus, media info is a self contained thing. And even more, I guess this list has nothing to do with the media.

.media.media--slat
  .media__item
    img(src="...")
  .media__body
    .media__title
    .a-special-list
      .a-special-list__title
      .a-special-list__data

I personally always have such doubts. What are your thoughts on this matter?

I totally agree Rhys