Last active
November 14, 2025 03:47
-
-
Save annibal/7161c252986be7f0b4f06385bcc8372f to your computer and use it in GitHub Desktop.
B.E.M. :: Block Element Modifier - naming standard - Cascading Style Sheets
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .BEM { | |
| --B: block, #1; | |
| --E: element, #2; | |
| --M: modifier, #3; | |
| --USAGE: block__element--modifier; | |
| --USAGE: nibol-slider__item--active; | |
| } | |
| *:nth-child(1) { | |
| .block { | |
| 💬: The name of the component, module, | |
| the root abstract independent | |
| entity this CSS describes; } | |
| .custom-block, | |
| .my-custom-block { | |
| 💬: Use a single '-' between the words | |
| that compose the BLOCKs name; } | |
| .my-other-custom-block { | |
| 💬: I personally believe that this name | |
| is way too big '.' It would cause the | |
| other classNames to end up being | |
| excessively wide; } | |
| .mocb, | |
| .myoc-block, | |
| .my-oc-blk { | |
| 💬: My strategy, if there is no way | |
| to make the BLOCK name shorter, is to use the full name exclusively for the root element, and abbreviate it to use as the prefix for the Elements and the Modifiers; | |
| } | |
| } | |
| *:nth-child(2) { | |
| .element { | |
| 💬: A part of a "block"; | |
| } | |
| .block__element { | |
| 💬: Use the naming standart, separate | |
| the element from the block using | |
| double underline "__"; | |
| } | |
| .my-block__title, | |
| .custom-blk__left-col, | |
| .mocb__right-col { | |
| 💬: Again, use "-" if the name requires | |
| more than a single word; | |
| } | |
| } | |
| *:nth-child(3) { | |
| .modifier { | |
| 💬: Describes a variation of an element; | |
| } | |
| .block__element--modifier { | |
| 💬: Use "--" after the "element" to | |
| indicate that it is a modifier class; | |
| } | |
| .my-block__title--sticky, | |
| .custom-blk__left-col--disabled, | |
| .mocb__right-col--dark { | |
| 💬: Examples of proper usage of the modifier; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment