BEM and SMACSS are two structured CSS methods that are suitable for different project requirements. BEM (Block Element Modifier) uses naming rules to clarify component relationships, solve class name conflicts, maintenance difficulties and other problems, and is suitable for component libraries or modular projects; SMACSS (Scalable and Modular Architecture for CSS) structurally divides styles into Base, Layout, Module, State and Theme, which is suitable for hierarchical management of large websites. The two can be used in combination, and the key is to maintain consistency, avoid over-necking, rationalize the use of tools and provide training documents to improve code maintainability and team collaboration efficiency.

Writing CSS may seem simple, but as the project grows bigger, it is easy to get out of control when maintaining it. At this time, it becomes necessary to use a structured method. BEM and SMACSS are two more popular ways of organizing CSS. They are not frameworks, but more like "behavioral norms" when writing styles. They can help you make the code clearer and easier to maintain.

What is BEM and what problems does it solve?

The full name of BEM is Block Element Modifier, and its core idea is to express the relationship between components through naming rules.

For example, you have a button component:

 .btn {}
.btn--primary {}
.btn__text {}

• .btn is Block (block)
• .btn__text is an Element (element), which belongs to btn
• .btn--primary is a Modifier (modifier), representing a variant of btn

The benefits of writing this way are obvious:

• You can tell which module it belongs to at a glance, and it is not easy to conflict
• It is easier to locate relevant parts after changing styles in the later stage
• When teamwork, the style is unified and there will be no variety of naming methods.

But it should be noted that the naming of BEM will be a little lengthy, and if your project is not big or pursues a minimalist style, it may not be suitable.

How does SMACSS organize styles?

SMACSS is the full name Scalable and Modular Architecture for CSS. It does not focus on naming specifications like BEM, but divides CSS into several categories from the overall structure:

1. Base : basic styles, such as body , input , and a default style reset
2. Layout : Layout style, controls page structure, such as header, footer, grid layout
3. Module : a reusable module, that is, components, such as buttons, cards, etc.
4. State : State class, used to describe the performance of a module in different states, such as .is-active and .is-hidden
5. Theme : Theme-related styles (this part is less used in actual projects)

This classification method is more suitable for large websites or long-term maintenance projects, and can help you better plan the level and scope of responsibilities of CSS.

How to choose? BEM or SMACSS?

In fact, there is no standard answer to this question, the key depends on your project type and team habits.

• If you are doing component libraries, design systems, or need a highly modular structure, BEM is more suitable because it emphasizes the clear structure inside the component.
• If you are maintaining a complete website with complex layouts and multiple state changes, SMACSS is classified more organized .

Of course, it can also be used in combination, such as using SMACSS to divide the overall structure, and using BEM naming method at the component layer, which is both clear and flexible.

Some tips in practice

• Maintaining consistency is the most important thing : no matter which method it is, the key is that the whole project must be unified in style, otherwise it will add to chaos.
• Avoid over-necking : Even if you use a structured method, be careful not to write too deep nesting, as it will affect performance and readability.
• Reasonable use tools : Tools like Sass or PostCSS can help you organize your structure more easily, such as automatically merging duplicate classes, generating namespaces, etc.
• Training documents for newcomers : If you decide to adopt a certain method, it is best to have a simple instructional document so that new members can get started quickly.

Basically that's it. Structured CSS is not to show off your skills, but to make the code you write easier to understand by yourself or others. Choose the right method and stick to it, and the effect will naturally be reflected.

The above is the detailed content of Structuring CSS with methodologies like BEM or SMACSS. For more information, please follow other related articles on the PHP Chinese website!