How to optimize css writing

css writing optimization: 1. The hierarchical nesting should not be too deep, generally no more than 4 levels; 2. Avoid using element selectors, which is not conducive to later modifications; 3. Avoid using group selectors, you can extract a Public classes define the same style, which is more convenient; 4. Reduce the number of files introduced, and the content display must be prioritized.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

When writing css, you must consider the naming of id, class, etc., the structure of the file, the extraction of common modules, the reusability, readability, scalability, and maintainability of the code. Otherwise, it may take a lot of time later. Make great efforts to maintain and modify it. When considering writing sufficiently scientific CSS, you need to consider the following aspects.

First analyze the requirements, and separate the header, navigation, sidebar, banner area, main content area, bottom, etc. as needed. Since the required things are highly reusable and cannot be attributed to any fixed module, such as paging, pop-up windows, etc., they need to separate a separate section of exclusive css and js, that is, componentization. With a clear structure, maintenance is easy.

Then we refine it and find some small parts with high reusability, such as borders, backgrounds, icons, fonts, margins, layout methods, etc. These are used a lot, causing code redundancy and difficulty in maintenance. Therefore, this part needs to be uniformly maintained and modified.

At the same time, the ordering of code is also very important to facilitate maintenance and inheritance or cascading coverage. In addition to these accidents, adding a directory or name in front of the code segment through comments can also facilitate maintenance.

Then from the conclusion, you should pay attention to:

1. The hierarchical nesting should not be too deep, which will increase the rendering time. Generally no more than 4 layers is best.

2. Avoid using element selectors.

Reason:

• The same element may be used many times. When the browser traverses, it will traverse all the elements. This is unnecessary.

• Requirements and code structure may change at any time, and may be reused on other pages, or add content to this page, so use the element selector to determine something. Conducive to later modifications.

3. Avoid using group selectors.

For example:

.header ul li,.content ul li,.footer ul li{border-left:1px solid red};

In this case, it is more convenient to extract a public class and then define the same style.

4. The number and order of file introductions

The number of file requests should be as small as possible, the content should be displayed in priority order, and the files should be loaded in order, so that users can see the more important ones first.

Considering the contradiction, when naming a style, we cannot consider naming two modules with different functions that have similar styles in the design draft by their content, such as "news" and "about" ” etc., but consider it from the category, function, and page. Make it easier for people to make connections between names and structures. After you become more proficient in writing CSS, you can use a CSS preprocessor to improve efficiency.

(Learning video sharing:css video tutorial)

The above is the detailed content of How to optimize css writing. For more information, please follow other related articles on the PHP Chinese website!