▲My CSS Architecture concept

Preface

It has been a short time to start the front-end. The longer the CSS field goes, the farther it goes. Let's look back at it. If you have a lot of skills and knowledge, you won't forget it anymore, for example, how to achieve a triangle without images, how to achieve a translucent effect under IE, etc. However, some things need to constantly hit the wall and summarize in the project practice, and then hit the wall and summarize again, slowly find the method that suits you, and then follow this method to develop it to get twice the result with half the effort. This article belongs to the latter, because it is in the general direction of the entire CSS. For Beginners or students who have insufficient practical experience in the project, it is recommended that you do not have to worry too much about what you don't understand. You can skip this article, you can leave a message to ask questions. Experienced people may also think that they are different from you. However, I would like to say that the CSS architecture varies from person to person and varies depending on the project size. There is no optimal architecture, but it is only suitable for you!

Starting from Semantics

After reading excellent books such as CSS zen garden, you will find that HTML semantics will be mentioned first in the beginning. What is HTML semantics? In fact, it is very simple. There are just a few tags in HTML. Table labels are used as tables, P labels are used as article sections, and H series labels are used as titles. Do not use all Div + span except a on the entire HTML page. I have to say that XHTML has some limitations in defining tags, so many structured tags are added to html5. in this regard, HTML semantics is also very important, it has been established as a standard.

Why HTML semantics?

Strictly speaking, this is due to the length of the previous paragraph. The reason for this is that it is closely related to the purpose of this Article. However, it is hard to say that it is not a matter of selling customs, but that if we propose it at this time, it will be hard to say clearly, and everyone will be confused. If you have patience, you will understand it later.

Images and texts --- my CSS Architecture concept

(Figure 1)

(Figure 2)

Figure 1 shows the CSS directory structure of my current project, and Figure 2 shows the figure I captured from mindmanager. The two figures will be of great help to my following articles. As shown in Figure 2:

1. cssuniversal library (global.css): This style sheet can be used on all websites. As long as it is a website, it can be imported. It involves various aspects of CSS, such as CSS resetting style, CSS layout style, margin, Font, font size, and alignment, the general CSS library is a direct embodiment of the CSS style separation principle (the style separation principle mentioned here and the style combination principle mentioned next are two complex concepts, to better understand it, we need to explain it in another article. Fortunately, there are still some articles like this. You can take a look at the blog post of the front-end Niu Ren Zhang xinxu: separation of CSS styles, merging and modularization of CSS styles. My CSS generic library is similar to the one visible on the Internet. If you need it, you can find it directly in Zhang xinxu's related articles. The following is a general CSS Library:

2. CSS (ktv_style.css): This style sheet follows the style combination principle. What style can be put into this style sheet? Is the general module of the entire website, such as the color of the general text and link text of the website, top-level navigation, border line, general title, website bottom, comment function module, etc, the style sheet takes a whole body and changes a style. All pages are changed accordingly. Therefore, be careful when changing the style.

 

3. single-page CSS (all style sheets under the pages directory): a homepage style sheet, such as index.css, is displayed on each page independently. This aims to solve style conflicts caused by renaming. This problem will become more and more prominent as the project grows and the page structure becomes more complex. After calling different style sheets on the page, even if the HTML page uses the same style name, there will be no conflict.

 

4. CSS used by the plug-in: the CSS used in this directory is basically a reference style table of the JS plug-in. The reason why the CSS is independent of a folder is to facilitate maintenance.

 

The above four points have largely clarified my CSS architecture. If I explain each point in detail, there will be many things to be discussed, such as the style separation and combination principles mentioned in the previous one or two points, if this article cannot be fully understood, you are advised to read the relevant article first. Has the article reached this point? The answer is no.

 

Modularize your style sheet

From here on, we can talk about why HTML semantics is required.

Do you have the habit of writing a DIV, defining a style name, writing another label to the DIV, defining another style name, and then writing the style in the corresponding CSS? Yes, no one is! However, I don't think this is a good practice. There are two bad points: 1. you have to spend a lot of energy to consider the naming of styles. What a disgusting thing is naming; 2. Abandon this writing method and turn to modular processing of style tables, then you will gradually embrace the HTML semantic principles. This is not a false statement. Please continue.

How to modularize a style sheet

Meaning of a module: In my understanding, a module is a set of elements that have the same business logic, functions, or closeness. For example, "people who may be interested" on the Weibo homepage after Logon ":

 

Such modules include the title bar and a simple list.

Weibo can use firebug to view the processing code of this module. It is complicated. If I deploy the code of this module, I will write it like this:

<Div class = "friend_love">

<H2> persons who may be interested </H2>

<Ul>

<Li> </LI>

</Ul>

<Em> Find someone </em>

<Span> </span>

<A class = "more"> more </a>

</Div>

You can see if you can understand why I write this. Each line of code is considered, including style naming. I am not saying that the front-end staff of Weibo are not very good, because the front-end code should be adjusted according to the project scheme and the presentation of the back-end data, but if you only write the front-end information, the code written in the first book should be simple enough with clear semantics. With the above HTML code, you can layout your own style:

. Friend_love H2 {}

. Friend_love ul {}

. Friend_love em {}

. Friend_love span {}

. Friend_love. More {}

You can also make comments in the style sheet:/* friend_love */;

If you need to call such a module on another page, you can copy the module well. Are you still worried about the two styles in this module? Maybe the EM element only needs to fill in the float: the style in the watermark: <em class = "FL"> </div>, Which is flfl. refer to the definition of the left floating style in global.css.

 

As mentioned above, the CSS architecture varies from person to person, depending on the project size. I have no reason for you to adopt a mature or reasonable approach that I have not yet verified, but I personally think it can be used, it's also easy to use!