CBEM with Selectors is an extension to the BEM Methodligy to avoid the main problems you get while using BEM.
I know CSS can be real pain sometimes, but I think I have something for you. I tried writing down my naming convention which is basically an enhanced version of BEM (Block, Element, Modifier). I name it CBEM with Selectors.
- It doesn’t force you to name every element
- Allows using CSS Selectors for saving line of codes
- Makes working with modifier easier
- Allows containers over a block element
- Saves code in General
BEM
The Block, Element, Modifier (BEM) methodology is a popular naming convention for classes in HTML and CSS. Full Article
Main problems with BEM
1. Container
Some blocks and elements needs a parent container for styling, which is used outside of the block. It feels slightly wrong to call it something like .block__container and have it placed outside the .block block itself.
2. Class everything
BEM dictates that you should add classes to each element in a component.
CBEM with Selectors — Enhanced BEM Methodology
CBEM with Selectors — Enhanced BEM Methodology is not officialy created by the BEM author and is just a methodology that I’m using additionaly to BEM in order to make using CSS a bit easier. CBEM with Selectors is an extension to the BEM Methodligy to avoid the main problems you get while using BEM. CBEM is using Container, Block, Element and Modifier as it’s main structure. Container alows to add a Container around a block with a specific naming convention.
Reusable and Specific HTML Elements
To save code we have to ask ourselves for each element if the code has to be reusable and specific. To apply this correctly, you need to fully understand the design and prototype before implementing a website, otherwise there could be complications.
Reusable
Reusable HTML Elements which can occure more than once within a site.
Specific
Speficic HTML Elements which is dentified with it’s class
or id
.
Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.
Child Elements
Using the >
to identify child elements with their parents.
Multiple classes
Using the class1.class2
to identify modifier depending on their parents class.
Container
In order to use a container above a block or element we use a dash -
r to make it clear that it relates to your block. This is used to name a parent HTML element of a Block or Element. Used to name Wrapper, Container, etc of a block.
HTML
<div class="block-container">
<div class="block-wrapper">
<div class="block">
</div>
</div>
</div>
CSS
.block-container{}
.block-wrapper{}
Block
Standalone entity that is meaningful on its own.
HTML
<nav>
</nav>
<nav class="navigation">
</nav>
<nav id="navigation">
</nav>
CSS
Reusable Block
Selects all <nav>
blocks.
nav {
}
Specific Block
Select the block with the ID navigation
.
#navigation {
}
Reusable & Specific Block
Select all blocks with the class navigation
.
.navigation {
}
Elements
A part of a block that has no standalone meaning and is semantically tied to its block. Depending on whether you want to use it in relation to its parent, you can use the selector to create a relationship within the CSS.
HTML
<div class="block">
<span></span>
<div class="block__element"></div>
<div class="block__element"></div>
</div>
CSS
Reusable Element with Selector
Selects all <span>
elements where the parent is a .block
element.
.block > span{
}
Reusable & Specific Element with Selector
Select all elements with the class block__element
where the parent is a .block
element.
.block > .block__element{
}
Reusable & Specific Element
Select all elements with the class block__element
.
.block__element{}
Modifier
A flag on a block or element. Use it to change the appearance or behavior. Depending on whether you want to use it in relation to its parent, you can use the selector to create a relationship within the CSS. In the BEM method, you normally name the block inside the modifiers classname, but to save lines of code, we only use the modifier name, and if it refers to its parent, we use the specific reusable modifier selector.
HTML
<div class="block">
<div class="block__element modifier"></div>
<div class="block__element modifier"></div>
</div>
CSS
Reusable & Specific Modifier with Selector
Selects all modifiers with both block__element
and modifier
set within its class attribute.
.block__element.modifier{}
Reusable & Specific Modifier
Select all modifiers with the class modifier
.
.modifier {}
