ABEM naming method

[Dan503]

This is a BEM based naming convention I came up with that helps users that enjoy using Atomic Design principles.

[a/m/o]-blockName__elementName -modifierName

More details can be found in this CSS-Tricks article: https://css-tricks.com/abem-useful-adaptation-bem/

[viT-1]

For mixins support you should have straight blockelement with modifier accordance. I prefer CSS 2.1 way founded on AMCSS: `[data-blockNameelementName = "-modifierForElementName-"] Hyphens in-modifierName-are needed to distinguish between variants, for example:= 'active'and*= 'inactive'`. With attributes you can group multiple blockelement modifiers without repeating long blockelement names in markup.

For example: tree__list

[viT-1]

For nesting I prefer to use simple (same weight) selector such as: [data-blockName__elementName *= "^someParentBlockOrParentBlockStateModifier^"] You can see that I use different "parentheses" for modifier name to have accent on any context/nesting modifiers.

[Dan503]

Nah, I prefer the .-modifier selector. It is much simpler to write and using classes is also more efficient in browsers than using attribute selectors on everything.

[viT-1]

@Dan503 Can you show ABEM example with mixins (multiple blocks on one DOM element)?

[Dan503]

Is this what you mean? 😕

<div class="a-one a-two -mod">
    <div class="a-one__elem a-two__elem -anotherMod"></div>
</div>

.a-one {
  &.-mod {}

  &__elem {
    .-mod > & {}
    &.-anotherMod {}
  }
}

.a-two {
  &.-mod {}

  &__elem {
    .-mod > & {}
    &.-anotherMod {}
  }
}

[viT-1]

using classes is also more efficient in browsers than using attribute selectors There will be a new version of browsers and the situation will change...

BTW, articles: selector strategy:

getElementById() can run about 15 million operations a second, compared to just 7 million per second for querySelector() in the latest version of Chrome. But that also means that querySelector() runs 7,000 operations a millisecond. A millisecond.

benchmark

[Dan503]

There is a GIGANTIC difference between selecting an element by it's ID and selecting it by a random attribute you made up.

• #selector is fastest but is a nightmare to maintain.
• .selector is a bit slower but is far more maintainable.
• [selector] is by far the slowest performing way to write a selector. I only use it if I have to.

[viT-1]

We have js-frameworks for "quering" DOM (components binding way), therefore we can use data-attributes for front representation (styling).

[Dan503]

Actually yeah, I may need to take that back. I tried running the benchmark test and the data attribute was pretty comparable to classes surprisingly.

So taking performance out of the question, I still think the classes are a nicer syntax to write.

[viT-1]

About your SASS example: You think on global modifiers. For me it is something like a global namespace in js. If i will use a-twoelem in -anotherMod state I will recive a bug about wrong state of a-oneelem

[viT-1]

Pretty article from @toddmotto: Stop toggling classes with JS, use behaviour driven DOM manipulation with data-states Published on 17 Dec 2013!