The Popular CSS architecture BEM
A mentor used to always tell me “there are infinite ways of skinning a cat”. I can’t explain that quote but took it to mean that your tools are your own.
Code Structure Benefits
Confidence and efficiency as a programmer is something that is in constant ebb and flow, especially at a junior level. There’s a myriad of ways to organize a web development project and recognizing them is something that will make you more confident as a coder and efficient as a code-reader.
BEM Methodology is one that has helped me build confidence and greaten my scalability skills for quite some time
BEM methodology is one of the more popular organization philosophies for web development projects. BEM is most used as a naming convention for HTML/CSS classes. However, the concepts can go beyond. And this methodology is popular for good reason.
1.It communicates purpose or function
2. It communicates component structure
3. It sets a consistent low-level or specificity for styling selectors
4. It’s easy to onboard. To use BEM, all you have to do is follow BEM naming conventions. According to State of CSS, BEM is the most popular methodology with new coders and those with longtime exposure.
5. Similarly BEM is popular with software engineers of all salaries, the popularity often going up as the salary does.
Get more demographic facts about BEM and other CSS-related technologies through this awesome website.
To reiterate. BEM is a naming convention for HTML and CSS classes. The methodology was developed by Yandex in order to better connect the HTML and CSS files and make developers be more descriptive with their class names.
BEM stands for Block Element Modifier, the three types of BEM entities.
- a block is an entity that exists independently, a parent, a top-level abstraction (ex: button, navigation bar, menu, form, …). The BEM class name simply is the name of the block (ex:
- an element is an entity that depends on a block, a child component (ex: button’s text, navigation bar’s logo, menu list item, form label, …). The BEM class name is the name of the parent block followed by two underscores and the element name (ex:
- a modifier is a an entity which describes the style or behavior of a block or an element. A modifier is added to a block or element with a double hyphen to describe its style or functionality. (ex:
Check out BEM in action with a simple navigation bar example.
- Nested elements more than 1 level deep, such as
nav__linkare still written as dependent on the block
- Modifiers should add a class name since they add to another layer of styling to a block or element.
<button class="btn btn--animated">Click Me</button>//NOT
<button class="btn--animated">Click Me</button>
The accompanying CSS will be so clean. BEM makes specifying by class really straightforward.
Nesting elements in SCSS feels even more satisfying. The different styling elements are in their own modular sections. And when you edit the stylesheet, you know exactly what you’re changing.
BEM is really satisfying and guaranteed to make you happier when building your web development project or reading someone else’s. Enjoy being happy.