To write a maintainable and extensible CSS, the core lies in clear structure, standardized naming, and modular design. 1. Use BEM naming specifications to clarify the relationship between blocks, elements, and modifiers, avoid class name conflicts, and improve structural clarity; 2. Modularly organize CSS files and split them according to functions to facilitate collaboration and maintenance; 3. Reasonably use preprocessors such as Sass, and use variables, nesting, and mixing to improve development efficiency; 4. Avoid over-necking and excessively long selectors, keep the style simple and high-performance, and enhance maintainability.

Writing maintainable and extensible CSS is the core of clear structure, standardized naming, and modular design. Many people think of writing CSS when they first write, but the more they write, the more they become, the more they get messy, and it’s a headache to make corrections. In fact, just by mastering a few key points, CSS can be easier to manage and can support increasingly complex projects.

1. Use BEM or similar naming specifications

Naming class names is the first step in writing CSS and is also the most likely place to have problems. If you use vague names such as .btn and .title , it is easy to conflict in different pages or components. BEM (Block Element Modifier) is a very practical naming method that allows you to see the relationship between elements at a glance.

for example:

• Block: .card
• Element: .card__title
• Modifier: .card--highlight

The benefits of naming this way are:

• Class names will not be repeated
• The structure is clear, you can tell which one is the father and which one is the son at a glance
• It is not easy to hurt other parts when modifying the style

Even if you do not follow BEM completely, you must ensure that the naming is logical, such as using lowercase and underscores uniformly to avoid confusion in abbreviation.

2. Modularly organize CSS files

Don't write all CSS in one file, it will get out of control soon. CSS files should be split by function or component, such as:

• _reset.css : reset the default style
• _variables.css : Define variables such as color, font, etc. (if you use a preprocessor)
• _layout.css : layout-related styles
• _header.css , _footer.css : each module style
• _utils.css : Tool class, such as margin/padding auxiliary class

During development, you can write separately and then merge and compress before going online. This makes it easier to modify and easier for multiple people to collaborate.

3. Use CSS preprocessors or tools reasonably

While native CSS is becoming more and more powerful, it is helpful to use tools like Sass, Less, or PostCSS in large projects. They can:

• Support nested writing (be careful not to be too deep)
• Define variables and mixins to reduce duplicate code
• Automatically add browser prefix
• Import and export by file

For example, use Sass variable to control the theme color:

 $primary-color: #007bff;

.btn {
  background-color: $primary-color;
}

In this way, you only need to change one variable, and you don’t need to find the color value in the whole article.

In addition, tool frameworks like Tailwind CSS can also improve efficiency in some scenarios, especially projects with frequent style changes.

4. Avoid over-necking and over-long selectors

Many people like nesting writing, such as:

 .container {
  .content {
    .text {
      color: red;
    }
  }
}

The final generated selector may be .container .content .text , which not only affects performance, but also easily causes difficulty in style coverage. It is recommended to nest at most two layers. If it exceeds the problem, you must consider whether it needs to be refactored.

At the same time, try to use ID selectors as they are too high to cover. Class selectors are more flexible and more suitable for reuse.

Basically that's it. Do a good job in naming specifications, module division, rational use of tools, and a little restraint, you can write CSS that is both easy to maintain and easy to expand.

The above is the detailed content of How to write maintainable and scalable CSS?. For more information, please follow other related articles on the PHP Chinese website!