My CSS architecture concept - it varies from person to person, there is no best, only suitable

Preface <br />I have been working in the front-end field for quite a while, and I have been working in the field of CSS for a long time. Looking back, there are many skills and knowledge that I will never forget once I have mastered them, such as how to implement triangles without pictures, how to achieve translucent effects under IE, etc.; but some things require constant setbacks and summarizations in actual project implementation, and then setbacks and summarizations again, and slowly find a method that suits you, and then follow this method to develop, so as to achieve twice the result with half the effort. This article belongs to the latter, because it is based on the general direction of the entire CSS. For beginners or students who do not have enough practical project experience, it is recommended that you do not mind too much if there are parts you do not understand. You can skip it or leave a message to ask questions. Experienced people may have some complaints and feel that they are different from yours, but I want to say that CSS architecture varies from person to person and from project to project. There is no optimal one, only suitable one!

Start with semantics <br />If you read excellent books such as "CSS Zen Garden", you will find that HTML semantics will always be mentioned at the beginning. What is semantic HTML? In fact, it is very simple. There are only a few tags in HTML. The table tag is used for tables, the p tag is used for article paragraphs, and the h series tags are used for titles. Don't use all div+span in the entire HTML page except a. It has to be said that xhtml has certain limitations in defining tags, so many structured tags have been added to html5. From this perspective, the semanticization of html is also very important and has been established as a standard.

Why should we make HTML semantic?
Strictly speaking, this should be included in the previous paragraph. The reason why it is separated out is because it is closely related to the purpose of this article. However, it is still impossible to say now. It’s not that I want to keep you in suspense, but if we bring it up at this time, it will be difficult to explain clearly and everyone will be confused. If you are patient and keep reading, you will understand.

Pictures and text---My CSS architecture concept

(Figure 1 )

(Figure 2 )

Figure 1 is the css directory structure of my current project, and Figure 2 is a screenshot I took from MindManager. Both figures will be of great help to my following article. From Figure 2:
1.Css universal library (global.css): This style sheet can be used on all websites. As long as it is a website, you can import this style sheet. It involves all aspects of CSS, such as CSS reset style, CSS layout style, margin, font, font size, alignment. The CSS universal library is a direct reflection of the CSS style separation principle (the style separation mentioned here and the style combination principle to be discussed next are two relatively complex concepts. To understand them well, another article is needed to explain them. Fortunately, there are still such articles. If you have time, you can read the blog article of Zhang Xinxu, a front-end expert: CSS style separation and re-separation, CSS style merging and modularization. My CSS universal library is similar to the one available on the Internet. If you need it, you can find it directly in Zhang Xinxu's related articles. Attached below is a screenshot of my CSS universal library:

2. Website general CSS (ktv_style.css): This style sheet follows the principle of style combination. What styles can be put into this style sheet? It is the common module of the entire website, such as the color of the common text and link text on the website, top-level navigation, border lines, common titles, website bottom, comment function module, etc. This style sheet affects the entire website. If you change one style, all the pages will be changed accordingly. Therefore, you must be cautious when changing this style.
3. Single-page css (all style sheets under the pages directory): Just like the homepage style sheet such as index.css, each page has an independent one. The purpose of this is to solve the style conflict problem caused by renaming. This problem will become more and more prominent as the project becomes larger and the page structure becomes more complex. After the page calls different style sheets, there will be no conflict even if the HTML page uses the same style name.
4. CSS used by the plug-in: The CSS used in this directory is basically the relevant style sheet of the referenced JS plug-in. The reason why it is separated into a folder is for the convenience of maintenance.
The above four points roughly explain my CSS architecture. If each point is explained in detail, there will be a lot to talk about, such as the style separation and combination principles mentioned in the previous one or two points. If you cannot understand this article thoroughly, it is recommended to read related articles first. Is this the end of the article? The answer is no.

Modularize your stylesheet <br />From here, we can talk about why we need to make HTML semantic.
Do you have the habit of writing a div, defining a style name, writing another tag in the div, defining another style name, and then writing the style in the corresponding CSS? Yes, who hasn’t been! However, I don't think this is a good approach. There are two bad points:
1. You have to spend a lot of energy to think about the naming of the style. Naming is such a disgusting thing;
2. Abandon this writing method and turn to modular processing style sheets, then you will gradually embrace the semantic principles of HTML. This is not a lie, please continue.

How to modularize your stylesheets
The meaning of module : In my understanding, a module is a collection of elements with the same business logic and the same or similar functions, so that users think these elements should be put together. For example, the “People who may be interested” section on the Weibo homepage after logging in:

Such modules include: title bar, simple list.
Weibo's processing code for this module can be viewed with Firebug. It is quite complicated. If I were to lay out the code for this module, it would be very simple. I would write it like this:

Copy code

The code is as follows:

<div class="friend_love">
<h2>People who may be interested</h2>
<ul>
<li></li>
</ul>
<em>Find someone</em>
<span></span>
<a class=”more”>More</a>
</div>

See if you can understand why I wrote it this way, every line of code is considered, including the style naming. I am not saying that Weibo's front-end staff are not good, because the writing of front-end code needs to be adjusted according to the project plan and the presentation of back-end data. However, if you are only doing front-end writing, the code you write for the first time should be simple enough and have clear semantics. Through the above HTML code, you can layout your own style:

Copy code

The code is as follows:

.friend_love h2{}
.friend_love ul{}
.friend_love em{}
.friend_love span{}
.friend_love .more{}

You can also comment in your stylesheet: /*friend_love*/;
If you need to call such a module in another page, you can copy it very well. With such a module and two style names, are you still worried about naming? Maybe the em element only needs to fill in the float:left style. Then congratulations, you don’t even need to write this style. Just call the style in global.css in the structure tag: <em class=”fl”></div>. Why is it fl? Please refer to the definition of the left floating style in global.css.

As I said before, CSS architecture varies from person to person and from project to project. I have no reason for you to adopt my approach, which has not yet been verified to be mature or reasonable. I just think it can be used and is easy to use. I am just throwing out some ideas!

<<: A performance bug about MySQL partition tables

>>: The final solution to Chrome's minimum font size limit of 12px

How to use html css to control div or table to be fixed in a specified position

My CSS architecture concept - it varies from person to person, there is no best, only suitable

How to use html css to control div or table to be fixed in a specified position

Solution to nginx not jumping to the upstream address

How to limit the number of concurrent connection requests in nginx

Web Standard Application: Redesign of Tencent QQ Home Page

Solve the problem that document.getElementBy series methods cannot obtain objects

Detailed tutorial for installing winx64 under mysql8.0.18 (with pictures and text)

Let you understand the deep copy of js

Mysql modify stored procedure related permissions issue

What are mysql dirty pages?

What is ZFS? Reasons to use ZFS and its features

Recommend

Solution to nginx hiding version number and WEB server information

What are your principles for designing indexes? How to avoid index failure?

Summary of Vue first screen performance optimization component knowledge points

GDB debugging MySQL actual combat source code compilation and installation

Practice of el-cascader cascade selector in elementui

JavaScript implements simple calculator function

Let's talk about the characteristics and isolation levels of MySQL transactions

Getting Started Guide to MySQL Sharding

MySQL select results to perform update example tutorial

Implementation of webpack code fragmentation

Implementation of textarea adaptive height solution in Vue

Implementation of Docker packaging image and configuration modification

MySQL database migration quickly exports and imports large amounts of data

Basic Implementation of AOP Programming in JavaScript

How to use Webstorm and Chrome to debug Vue projects