BEM Naming Convention
Throughout my experience at Flatiron’s software engineering bootcamp, I got used to creating various files to create code in and use throughout the application I’m developing. I didn’t put too much thought into how I created component classes. It wasn’t until recently I came across an organizing convention called BEM.
BEM stands for Block Element Modifier.
See, when building small websites, organizing your files and various code components isn’t an issue. But what happens if you’re working on a large application with too many files, and components with unique classes?
This is where the BEM convention shines. The primary idea behind this is to make the development process quicker and have better teamwork since the classes are arranged independently.
I recently started to incorporate this convention in my own builds, for example the amazon clone I created used BEM convention. I personally used a single underscore rather than the double underscore pattern indicated by the BEM convention standards. But I felt that the code I’m writing is definitely more organized as opposed to before.
The Block in BEM is a representation of an object on a website. Some of the common blocks are header, content, sidebar, footer and search.
The Element in BEM is a component within the block that performs a particular function.
The Modifier in BEM is how variations of a block is represented. Bootstrap’s button sized are a good example. The button sizes are simply variations of the button itself.
A quick note is to be careful how BEM is implemented. It should only be used on classes, and not on ID’s.
BEM allows for code to become scalable and reusable. This, in turn, increases overall productivity and engages teams for more collaboration.
RESOURCES:
