Naming Conventions

We are using the BEM-Syntax (Block Element Modifier) BEM. BEM helps use to improve maintainability, reusability and readability. It also provides a unified aproach for CSS-Development so that all our Developers are speaking the same language.

How to use BEM

Block

Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well.

<div class="block"></div>

Element

Parts of a block and have no standalone meaning. Any element is semantically tied to its block.

<div class="block">
	<div class="block__element"></div>
</div>

Modifier

Flags on blocks or elements. Use them to change appearance, behavior or state.

<div class="block block--big">
	<div class="block__element"></div>
</div>

Using BEM in Sass

If you are working with sass try to use nesting as much as possible to avoid duplicated code.

.block {
	&--modifier {

	}

	&__element1 {
		&--modifier {

		}
	}

	&__element2 {

	}
}