In this post we will discuss about the BEM in detail and why you should use it too. Let's go.
The simplicity of the naming convention, along side the benefit of implementation makes this a awfully fashionable alternative. It creates standard and versatile CSS that's straightforward to scan, perceive and maintain.
I have used BEM as a naming convention for some time and it's created an enormous change!😉
I feel like I no longer spend ages trying to figure out how to name things which means I get to spend more time focusing on the actual code. Additionally it fits rather well once used for making elements and style systems.
BEM - Block Element Modifier is a powerful and straightforward naming convention that helps you create re-usable components. It makes your front-end code easier to read, easier to work with, additional sturdy and easier to scale.
Block
A standalone entity that's meaningful on its own. Any DOM node can be a block if it accepts a class name.
Element
Part of a block (usually the child element) that is semantically tied to the block. Element classes contain the block and element name separated by two underscores.
Example: .block__element
Modifier
Flags on blocks or element used to change appearance, behaviour or state. Modifier classes contain the block or element class they are applied to separated by two hyphens.
Example: .block__element--modifer
BEM is easy to use for modular and reusable code. It's flexible, configurable and easily combined with other methodologies. The class names can sometimes get a little long but that's a small price for good code readability.😊
Thanks For Reading 🤟