Who the hell is BEM?

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.

Slides

This talk explains the basic concepts of BEM with some examples.

Video

Further reading

If you’re interested in learning more about BEM I recommend the following articles.

Other talks

Notes to your inbox

Be notified when I post something new. Occasional, short emails. Nothing fancy, just links to new articles and content.

I respect your inbox. No spam. Unsubscribe with just a click.


What I'm doing
My now page shows what I'm focusing my efforts on.

Send me an email
dave@daveredfern.com

Follow me online
Twitter
LinkedIn
Github

Photography
Gallery
Instagram