What is this WIKI page for?

This describes our standards for naming elements on websites using the BEM (Block – Element – Modifier) method, for consistency and so it’s easier for everyone to work with each other’s code.

It’s very much a starting point only, and will get updated with improvements as we collaborate and learn what’s best.

Version History

0.01 | 2022-05-11 | Martin Carter | Created very basic version

Main Content

1. Block – Element – Modifier is a standard for naming classes on a website that takes only a couple of seconds’ thought and setup per class, but makes a huge difference to the ease of both building a site and maintaining it in future
2. Anyone unfamiliar with what it is, why it’s important or how best to use it should check out Kevin Geary’s excellent tutorial here: https://youtu.be/tha_ynmZRaA
3. All website selectors, without exception, must be in BEM format
4. There are standards for what we call the blocks, which are listed below
5. There are standards for what we call the elements, which are listed below
6. There are standards for what we call the modifiers, which are listed below
7. Please check all these standards when creating a new class
8. If the block type, element type or modifier type you need are not present, please add it as a suggested edit

Naming – Blocks

Block Name     Block Description

Example    –     An Example Description

Naming – Elements

Block Name     Block Description

Example    –     An Example Description

Naming – Modifiers

Block Name     Block Description

Example    –     An Example Description

Related Articles

You may also find the following useful:

There are no articles linked to from here at present.