Block Element Modifier Cascading Style Sheets
Block Element Modifier (BEM) is a methodology for writing modular and reusable CSS, which uses a naming convention to make code more understandable and maintainable.
- Since:2011
- Changelog:github.com
- Docs:en.bem.info
- Github Topic:bem
- Official:en.bem.info
- Reddit:r/BEM
- Repository:github.com
- StackOverflow:[bem]
- Twitter:@bem_en
#What is BEM?
Block Element Modifier (BEM) CSS is a naming convention for classes in HTML and CSS, which is designed to make it easier to understand and maintain code, especially for large-scale projects. BEM emphasizes a modular approach to web development, where each component is broken down into small, reusable pieces that can be combined to create complex layouts.
#BEM Key Features
Most-recognizable BEM features include:
BEM uses a strict naming convention for classes, with three parts: block, element, and modifier.
Blocks are the top-level components, such as headers, footers, or navigation menus.
Elements are the individual parts that make up the block, such as buttons or links.
Modifiers are used to modify the appearance or behavior of blocks or elements, such as changing the color of a button when it is in a different state.
BEM has several use cases, including:
Making code more modular and reusable, which can save time and effort when creating large-scale projects.
Making it easier to understand code, especially for new developers who may not be familiar with the project.
Improving collaboration between developers, as everyone can understand how the code is structured.
#Block Element Modifier Summary
BEM CSS is a naming convention for classes in HTML and CSS that emphasizes a modular approach to web development, using a strict naming convention for classes to make code more understandable and maintainable, and has use cases for making code more modular, easier to understand, and improving collaboration between developers.
