Page Comparison

A "Quick" explanation for css naming:

Given this example HTML:

<button class="Button Button___primary">
    <i class="Icon Icon___small Button_leftIcon"/>
    <span class="Button_label">Click Me!</span>
    <i class="Icon Icon___small Button_rightIcon"/>
</button>

...

1. The component itself representing the Block in BEM

2. The components child elements representing the Element in BEM

3. The components modifiers representing the Modifier in BEM

Blocks:

There are technically 3 Blocks above – the outer button and the two inner icons. The icons are Blocks as they are also components that are imported into the button component. So, the Block class names are:

...

Generally speaking, Block classes are used to visually style the component and its child elements and not define any placement styles within its parent container.

Elements:

There are 3 Elements above – the two icon Elements and the span tag containing the button's text. While the icons are components and therefore are Blocks in their own right, they are also Elements from the buttons perspective, so they receive Element class names as well:

...

Generally speaking, Element classes are used to position the element within the Block and not strictly to apply visual styling. Though visual styling can be applied if it doesn't make sense to support the needed styling within a child component's default styles or if the Element doesn't necessarily warrant the creation of a separate component.

Modifiers:

The overall button and the two icons above have modifiers applied:

...