Shulou(Shulou.com)06/03 Report--

This article mainly explains "what is the concept of css architecture". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what is the concept of css architecture"?

Preface

I have been doing the front end for a long time, and I have been going further and further in the field of css. Looking back, I will never forget if I have mastered a lot of skills and knowledge, such as realizing triangles without pictures, how to achieve translucency under ie, and so on. But some things need to constantly hit the wall in the actual combat of the project, summarize, and then hit the wall, and then sum up, slowly to find their own method, and then follow this method, to develop, in order to get twice the result with half the effort. This article belongs to the latter, because it is standing in the general direction of the whole css, for beginners or students who do not have enough actual combat experience in the project, it is suggested that you don't mind too much if you don't understand, you can skip it, or you can leave a message to ask questions. Experienced people may also complain that they feel different from you, but I would like to say that the css architecture varies from person to person and project size, there is no optimal, only suitable!

Starting from semantics

If you look at excellent books such as css Zen Garden, you will find that the semantics of html must be mentioned at the beginning. What is html semantics? In fact, it is very simple, html has only a few tags, table tags are used as tables, p tags are used as article paragraphs, and h-series tags are used as headings, not all div+span of 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 point of view, html semantics is also very important and has been established as a specification.

Why do you want to make html semantic?

Strictly speaking, this belongs to the length of the previous paragraph, and it is isolated because it is closely related to the purpose of this article. However, it is still impossible to say, not to sell the key, but if it is proposed at this time, it is very difficult to say clearly, and people will be in the clouds when they look at it. If you are patient and keep watching, you will understand.

1.Css Common Library (global.css): this stylesheet can be used on all websites and can be imported as long as it is a website. It involves all aspects of css, such as css reset style, css layout style, margins, font, font size, alignment. Css common library is the direct embodiment of the principle of separation of css styles. (the principle of style separation here and the principle of style combination are two more complex concepts, which need to be well understood. Fortunately, there are such articles. If you have time, you can take a look at Zhang Xinxu's blog post: re-separation of css style separation, css style merger and modularization. My css universal library is more or less the same as what can be seen on the Internet. If you need it, you can find it directly in Zhang Xinxu's relevant articles. A screenshot of my css common library is attached below:

two。 Website generic css (ktv_style.css): this stylesheet follows the principle of style combination. What styles can be put into this stylesheet? It is the common module of the whole website, such as the color of the common text and link text of the website, the top navigation, the border, the general title, the bottom of the website, the comment function module, etc., the style sheet starts the whole body and changes a style. all pages are changed accordingly, so be careful when changing this style.

3. Single-page css (all stylesheets in the pages directory): for home stylesheets such as index.css, each page has a separate page to solve the problem of style conflicts caused by renaming. This problem will become more and more prominent as the project gets bigger and the page structure becomes more complex. After the page invokes different stylesheets, there is no conflict even if the html page is named with the same style.

4. The css used by the plug-in: the css used in this directory is basically the relevant stylesheet of the referenced js plug-in, which is separated into a folder for ease of maintenance.

The above four points are generally clear about my css architecture. If you explain each point in detail, there will be a lot of things to talk about, such as the principle of style separation and combination mentioned above. If this article cannot be understood thoroughly, it is recommended to read the relevant article first. Is this the end of the article? The answer is no.

Modularize your style sheet

From here, we can talk about why we want to make html semantic.

Are you in the habit of writing a div, defining a style name, writing another tag in the div, defining a style name, and then writing the style in the corresponding css? Yes, who hasn't been! However, I do not think this is a very good approach. There are two disadvantages:

1. You have to spend a lot of energy thinking about style naming. Naming is such a disgusting thing.

2. Abandon this way of writing and switch to modular stylesheets, and you will gradually embrace the principles of html semantics. This is not empty words, please continue.

How to modularize style sheets

The meaning of the module: in my understanding, a module is a collection with the same business logic, the same function or similar functions, which makes it seem to the user that these elements should be put together. For example, "people who may be interested" on the home page of Weibo after logging in:

Such modules include: title bar, simple list.

Weibo on the processing code of this module, you can use firebug to view, more complicated, if I am to lay out the code of this module, very simple, I will write:

The code is as follows:

People who might be interested.

Find someone

More

See if you can understand why I wrote this. Every line of code is considered, including style naming. I'm not saying that the front-end staff of Weibo is not good, because the writing of the front-end code should be adjusted according to the scheme of the project and the presentation of the back-end data, but if you only do the front-end writing, the code written for the first time should be simple and semantically clear enough. With the html code above, you can lay out your own styles:

The code is as follows:

.friend _ love h3 {}

.friend _ love ul {}

.friend _ love em {}

.friend _ love span {}

.friend _ love .more {}

You can also comment on the stylesheet: / * friend_love*/

If you also need to call such a module in another page, it can be well copied, such a module, two styles named, are you still worried about naming? Maybe the element em only needs to fill in the style of float:left, so congratulations, you don't even need to write this style, just call the style in global.css in the structure tag: why fl, please refer to the definition of left floating style in global.css.

At this point, I believe you have a deeper understanding of "what is the concept of css architecture". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.