Last updated: November 2018
Naming things is hard. Really hard. Having a convention for how to name things within a team helps everyone understand the code. It allows everyone who works on the project, from front end developers to programmers, to work on a project with the understanding of how things are organised.
Digging around CSS to find out how something is made can be a pain. Naming things correctly allows anyone to inspect the HTML and immediate understand why something is styled like it is.
BEM to the rescue! BEM is a class naming convention that helps promote growth and scale, reusability, increase productivity and team work. It uses double underscores and double dashes to signify where something belongs and what it is reliant on.
BEM stands for block, element and modifier.
This talk explains the basic concepts of BEM with some examples.
If you’re interested in learning more about BEM I recommend the following articles.