CSS’s class naming convention.
We give the class name for CSS. Different people have different ways of naming Class, which can confuse the reader.
We need to name the class in a unified way to increase the readability of the code.
CSS has many methodologies. Among them, we will look at how to name Class according to BEM.
BEM is divided into three categories.
A functionally independent page component that can be reused.
In other words, we talk about components.
- The class is named according to the purpose, not how it looks.
- Blocks can be nested in each other.
- You can have any number of nesting levels.
- Use ‘-’ to connect names to each other.
- For the outermost block, match the component name.
.└──── components └── edit-text.svelte
A composite part of a block that can’t be used separately from it.
element is a part of a block that performs a certain function.
- The element name is separated from the block name with a double underscore (__).
Elements can be nested inside each other.
The block name defines the namespace, which guarantees that the elements are dependent on the block (block__elem).
An entity that defines the appearance, state, or behavior of a block or element.
- Flags on blocks or elements. Use them to change appearance, behavior or state.
- The modifier name is separated from the block or element name by two dashes ( — ).
- A modifier can’t be used alone
Pros and cons
- The style structure can be grasped at a glance.
- The range can be inferred only by the class name.
- It is easy to collaborate.
document.getElementsByClassName("block-name__element-name — modifier")
- It’s hard to choose a double click.
Hyphen and underbar are mixed, so there is a problem that you can’t choose the class name at once by double-click.
The State of CSS 2020: CSS Methodologies
Codified ways to write cleaner CSS. Satisfaction, interest, usage, and awareness ratio rankings. Technologies with less…
BEM - Block Element Modifier
There are only two hard problems in Computer Science: cache invalidation and naming things - Phil Karlton Encapsulates…