BEM are a few Principles that help you organize your CSS. stands for Block, Element, Modifier. The main goal is to avoid specificity wars and redundancy.
All elements are identified by classes.
block__element--modifier
A Block is a reusable element that doesn't depend on other elements' styles. A Block is made up of Elements and other Blocks. So they may also be nested.
blogPost
blogPost__title
The relation between Block and element doesn't represent the markup of the block. A common rookie mistake is to do something like this:
blogPost__title__link
This is wrong it should be something like this:
blogPost__titleLink
A modifier represents state. They can be used on Blocks or Elements.
blogPost--teaser
blogPost__commentField--active
An important thing to remember about modifier is that when you define the class attribute you should set both modified and unmodified attributes.
<article class="blogPost blogPost--teaser">
<h1 class="blogPost__title blogPost--teaser__title"></h1>
</article>Titles may always look the same. In that case you can simply do
<article class="blogPost blogPost--teaser">
<h1 class="blogPost__title"></h1>
</article>All styles are put inside client/stylesheets/. Every Block has one CSS file. There is a directory lib which contains variables. Shared attributes are put inside abstractions.
abstractions/important-text._next.css
important-text,
.blogPost__title {
color: red;
}Here's an example file-tree relative to client/stylesheets/
/lib/ # All variables
/lib/reset._next.css # A custom reset file (the leading underscore is to load it before main)
/lib/colors._next.css # Color variables
/abstractions/ # Shared attributes (may be custom-selectors)
/abstractions/list._next.css # A list abstraction
/blocks/ # All blocks
/blocks/nav._next.css # A nav
/main.next.css # All styles that apply to HTML elements