Best Practices

BEM

BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yandex. It is a smart way of naming your CSS classes to give them more transparency and meaning to other developers. They are far more strict and informative, which makes the BEM naming convention ideal for teams of developers on larger projects that might last a while.

The naming convention follows this pattern:

.block {}
.block__element {}
.block--modifier {}

• .block represents the higher level of an abstraction or component.
• .block__element represents a descendent of .block that helps form .block as a whole.
• .block--modifier represents a different state or version of .block.

The reason for double rather than single hyphens and underscores is so that your block itself can be hyphen delimited

More information about BEM

Namespace

When we work at scale, we often find that we spend a large amount of our time reading, maintaining, and refactoring existing code, rather than writing and adding new features. This is the reason we focus so much on things like architectures, naming conventions, methodologies, preprocessors, scalability, etc.: because writing CSS is easy; looking after it is not.

What we want is to be able to write code that is as transparent and self-documenting as possible. Transparency means that it is clear and obvious (to others) in its intent; self-documenting means that we don’t have to lose time to writing and reading lengthy, supplementary documentation.

For parts of Chop Chop we are using namespaces. Namespaces are letter prefixes that indicate that those classes have certain characteristics. BEM helps us understand the structure of the HTML and CSS whereas namespaces help us understand the functionality of those classes.

We use the following prefixes:

• u- stands for utilities. You will find the CSS for all these classes inside the utility folder. These are single function classes and are designed to override any other styles. This means that many utilities have !important declared. Examples include colours, responsive images, containers and lists.
• g- stands for grids.

Here is a good resource about namespaces. We don’t use them all but the logic behind them is the same.

---

Templates

Templates mostly focus on content structure (such as character length, image size, etc) rather than the actual content.