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.

All Selectors

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 {}

Github