How do I structure the website CSS?

ArticleDirectory

• I. Preface
• 2. Some past practices I know
• 3. How do I structure the website CSS?
• Iv. Applicability

From http://www.zhangxinxu.com by zhangxinxu
Address: http://www.zhangxinxu.com/wordpress? P = 944

I. Preface

These are some of the things accumulated by yourself, which may have obvious personal marks. It is not a professional content, not an authoritative guide, but a demonstration of your own ideas. I hope to share my views and opinions with other excellent colleagues. For progress and improvement.

Original address: http://www.zhangxinxu.com/wordpress? P = 944, from Zhang xinxu-xin space-xin Sheng live, visit more excellent technical articles from the original source. Author: Zhang xinxu, welcome to my personal website. 2. Some past practices I know

The website practices vary with the nature and size of the website, and the Standards left by the company's predecessors vary with the perspective of CSS engineers. Due to my limited experience, I know little about it and can only talk about superficial amateur content. If it is not accurate, please note.

As mentioned in the cssfile, some websites are classified into header.css, body.css, and footer.css, which are not evaluated;
Reset.css, main.css, and content.css;
Common.css is the same for each category, for example, home.css (home page), album.css(album page, message.css(insite page, blog.css (log page), etc., without comments;
It is divided into base.css, and each activity page has a separate CSS, and so on, without comments;
Others directly embed CSS in the page, rather than calling external links, without comments.

There is no correct or incorrect solution for these different methods. Each method has its own principles, so I am not qualified to make any comments.

For the content of each CSS file, there will usually be a long CSS reset (style resetting), and then there will be a uniform prefix, Long Name Style content, just like some styles of Renren:

It is understandable to use long-lived names and uniform parent-level names to avoid style conflicts. Yes! I used to do the same.

Original address: http://www.zhangxinxu.com/wordpress? P = 944, from Zhang xinxu-xin space-xin Sheng live, visit more excellent technical articles from the original source. Author: Zhang xinxu, welcome to my personal website. 3. How do I structure the website CSS?

First of all, I usually only use one file for CSS files. This is not about the size of the website. The larger the website, the more obvious the advantages and potential of my practice. My single CSS file is suitable for websites of Web2.0, such as SNS (happy, everyone, and the white community), Digu, Xiami, and fanke, if it is a portal website, sorry, it is definitely not suitable.

The key to making a single CSS file available for a website. Isn't this CSS file very large? If a website has 400 pages, therefore, this CSS file does not require hundreds of kb. If the style of the website page is the same, the CSS file can be controlled very small with a good web system structure and high performance, and the page scalability is also very good. Next we will start the presentation at. There are a lot of content, so we need to take a look at it ~~

1. Overview

The page layout and article content display are required. I made an image of the overall architecture, as shown in:

2. About CSS Reset
CSS reset (CSS reset) is basically unnecessary. at least 80% of CSS reset is unnecessary, but overwrite of page CSS is added, especially like kaixin.* {margin: 0;} this kind of amateur practice is even more undesirable (but it damages the compatibility of many UIS, such as single check boxes ). I don't mean to discard CSS reset. I will simply reset some common labels and avoid overwrite (style rewriting) to ensure the most streamlined style and highly efficient rendering. As follows:CodeExample:

 
Body {
Line-Height: 1.4;
Background: white;
}
Body, input, textarea, select {
Font-size: 12px;
Color: #333;
Font-family: Arial;
}
Body, H1, H3, H4, P, UL, Ol {
Margin: 0;
}
Ul, Ol {
Padding-left: 0;
List-style-type: none;
}
/* Image with no-border */
A img {border: 0 ;}
 

This is all my CSS reset. That's enough. I have not encountered any compatibility issues. Don't blindly follow some mainstream practices. That's enough.

Original address: http://www.zhangxinxu.com/wordpress? P = 944, from Zhang xinxu-xin space-xin Sheng live, visit more excellent technical articles from the original source. Author: Zhang xinxu, welcome to my personal website.

3. CSS general style Library
I mentioned the General CSS style Library in the document "separation of CSS styles and separation. The common CSS style Library is a CSS style Library that can be used on any website. The document "separation of CSS styles" only shows a part of the same CSS style Library. The complete generic Style Library is as follows (you can rename or add or delete some styles as you like):

. L {float: Left;}. r {float: Right;}. cl {clear: Both ;}
. N {font-weight: normal; font-style: normal;}. B {font-weight: bold;}. I {font-style: italic ;}
. Fa {font-family: Arial ;}. FG {font-family: Georgia ;}. FT {font-family: tahoma ;}. FL {font-family: lucida console ;}. FS {font-family: ' ';}. FW {font-family:' ';}
. TC {text-align: center;}. tr {text-align: Right;}. TL {text-align: Left ;}
. Tdl {text-Decoration: underline;}. TDN,. TDN: hover, A. tdl: hover {text-Decoration: none ;}
. G0 {color: #000000 ;}. g3 {color: #333333 ;}. g6 {color: #666666 ;}. g9 {color: #999999 ;}. red {color: red ;}. wh {color: White ;}
. F0 {font-size: 0 ;}. f10 {font-size: 10px ;}. f12 {font-size: 12px ;}. f13 {font-size: 13px ;}. f14 {font-size: 14px ;}. f16 {font-size: 16px ;}. f20 {font-size: 20px ;}. f24 {font-size: 24px ;}
. VM {vertical-align: middle ;}. VTB {vertical-align: Text-bottom ;}. VT {vertical-align: Top ;}. vn {vertical-align:-2px ;}. vimg {margin-bottom:-3px ;}
. M0 {margin: 0 ;}. ml1 {margin-left: 1px ;}. ml2 {margin-left: 2px ;}. ml5 {margin-left: 5px ;}. ml10 {margin-left: 10px ;}. ml20 {margin-left: 20px ;}. mr1 {margin-Right: 1 ;}. MR2 {margin-Right: 2px ;}. mr5 {margin-Right: 5px ;}. mr10 {margin-Right: 10px ;}. mr20 {margin-Right: 20px ;}. MT1 {margin-top: 1 ;}. MT2 {margin-top: 2px ;}. mt5 {margin-top: 5px ;}. mt10 {margin-top: 10px ;}. mt20 {margin-top: 20px ;}. mb1 {margin-bottom: 1px ;}. mb2 {margin-bottom: 2px ;}. mb5 {margin-bottom: 5px ;}. mb10 {margin-bottom: 10px ;}. mb20 {margin-bottom: 20px ;}. mL-1 {margin-left:-1px ;}. MT-1 {margin-top:-1px ;}
. P1 {padding: 1px ;}. PL1 {padding-left: 1px ;}. pt1 {padding-top: 1px ;}. PR1 {padding-Right: 1px ;}. PB1 {padding-bottom: 1px ;}. p2 {padding: 2px ;}. pl2 {padding-left: 2px ;}. pt2 {padding-top: 2px ;}. pr2 {padding-Right: 2px ;}. PBS {padding-bottom: 2px ;}. pl5 {padding-left: 5px ;}. p5 {padding: 5px ;}. pt5 {padding-top: 5px ;}. PR5 {padding-Right: 5px ;}. pb5 {padding-bottom: 5px ;}. p10 {padding: 10px ;}. pl10 {padding-left: 10px ;}. pt10 {padding-top: 10px ;}. pr10 {padding-Right: 10px ;}. pb10 {padding-bottom: 10px ;}. p20 {padding: 20px ;}. pl20 {padding-left: 20px ;}. pt20 {padding-top: 20px ;}. pr20 {padding-Right: 20px ;}. pb20 {padding-bottom: 20px ;}
. Rel {position: relative;}. Abs {position: absolute ;}
. DN {display: none ;}. DB {display: block ;}. diB {-moz-inline-Stack: inline-block; display: inline-block ;}. di {display: inline ;}
. Ovh {overflow: hidden;}. ovs {overflow: Scroll;}. VL {visibility: hidden;}. VV {visibility: visible ;}
. Lh14 {Line-Height: 14px ;}. lh16 {Line-Height: 16px ;}. lh18 {Line-Height: 18px ;}. lh20 {Line-Height: 20px ;}. lh2{ line-Height: 22px ;}. LH24 {Line-Height: 24px ;}
. Fix {* ZOOM: 1 ;}. fix: After ,. fix: Before {display: block; content: "clear"; Height: 0; clear: Both; overflow: hidden; visibility: hidden ;}. z {_ ZOOM: 1 ;}

The style above has a simple classification. In a sense, the CSS library and JS library are similar.

You can embed the following code in the header & head> label of your page:

 
<LINK rel = "stylesheet" href = "http://www.zhangxinxu.com/study/css/zxx.lib.css" type = "text/CSS"/>
 

If you want to download this CSS file, you can click here: zxx.lib.css (right-click [target | link to save as]). You can modify it at will. If you can keep my personal information, I am very grateful ~~

4. Website CSS style Library
The style here is specified based on the actual project content. For example, what is the text link color, what is the style after the text link, some common background color styles, common border styles, and some high width. Based on my experience, the website CSS style Library can be structured in the following parts:
① Common website colors, especially link colors
② Common background color of a website (I used to use the first two letters of BG + color, for example,. bgf7 for background: # f7f7f7 ;)
③ Common website border colors, which are similar to the margin attribute in the general CSS library and need to be split, for example. bbdd indicates border-bottom: 1px solid # DDD; the naming conventions of each person are different, but the naming conventions are as simple as possible. You can even directly add two letters (case-insensitive match) like Google. In addition, be sure to inform the designer that the border color should not be too much, so you cannot sacrifice it by feeling, that is, if the # cecece border color is used before, even if # d0d0d0 is better, use # cecece instead. This is team collaboration.
④ Single-margin attributes left over from the website. For example, if a div has a large white space, it has a separate margin-top: 35px attribute. OK, put this attribute in the CSS style Library of the website. mt35 {margin-top: 35px;} is retained for use in a similar layout or desired place.
⑤ The single padding attribute left over from the website. For example, whether it is floating adaptive or absolute positioning adaptive in double-column Adaptive Layout, the padding-left value must be used, in this case, the padding-left multi-single style can be extracted and exists in the form of a website Style Library. Remember, it is a single attribute and it is not allowed to extract individual padding values from common elements. Otherwise, it is a pitfall for yourself.
⑥ The width attribute left over from the website. In the Fluid layout idea, the width is limited and precious and needs to be well utilized.
7. Some HEIGHT attributes commonly used by websites refer to some height values, such as height: 18px; Height: 20px; Height: 24px; Height: 50px; Height: 100px; Height: 200px.

Remember one principle:The style of common website elements (buttons, navigation, tabs) cannot be separated as the CSS style Library of the website.

Original address: http://www.zhangxinxu.com/wordpress? P = 944, from Zhang xinxu-xin space-xin Sheng live, visit more excellent technical articles from the original source. Author: Zhang xinxu, welcome to my personal website.

5. General small icon style set for websites
Style merging of small icons is generally better handled. Due to its regular pattern, CSS merging styles related to small icons are often seen at a higher position in CSS files, this is common in SNS websites. Generally, the merged style is {Background: url(xx.png) No-Repeat;}, and the separated style is {background-position: X, Y, I don't think there are many headers. I just have some opinions on naming them. When naming small icon styles, it is recommended that you do not associate the image content. For example, you should not use ialbum to name an album. There are three reasons:
1. Think about how images are named to kill n multiple brain cells
2. The name is long and occupies the number of bytes, that is, the size of the CSS file.
3. It is also the most important maintenance. Imagine if the album icon is no longer used in the future, can the original album icon be replaced by other small icons (such as RSS icons? Theoretically, in addition to necessary HTML replacement, we also need to rename the icon style, that is, ialbum → IRSs, instead, you can add new icons directly to the backend.

My current practice is to use an uncommon label as a dedicated label for the small icon of a website, such as the s label or the U label. I am used to separate the small icon into a small Sprite, each icon is placed in a 20*20 Pixel Grid. In this case, I use the matrix naming method. The name is only associated with the location. For example, if I use the U tag as a dedicated label for the small icon of the entire website, I name it u00 in sequence based on the icon location (assuming 20 icons in a row, u01, u02... U019, U10, u11 ,... U119 .... The benefit of this kind of naming is that you don't have to worry about the icon at the exact location, and you don't have to worry about name conflicts. You don't need to rename the icon when the icon location and content are changed.

For example, the u113 in is actually U (). This small icon naming method is called the "small icon matrix naming method ". This name is slightly insufficient because the source file needs to be opened or the corresponding class needs to be accurately queried through annotations when using the small icon.

6-10. General website styles
The "General website style" here can be said to be the most opposite of the "General website Style Library. General website styles refer to the general style of "independent elements". The so-called "independent elements" refer to General website navigation, menus, buttons, tabs, text box decoration, and image decoration, rounded corner processing. These "independent element" styles cannot be separated and classified into the "General website Style Library". Otherwise, they will leave you with endless pains in the future!

I almost never set width for buttons or navigation. They are adaptive width, which greatly saves sprite background images and CSS code costs. I have discussed it many times before. I will not talk about it here.

The amount of code for General website styles occupies a considerable proportion in the entire CSS file. If your CSS file finds that General CSS styles only occupy a small part of the entire CSS file, in particular, when the website project is large, you need to be vigilant. The final result may be that the CSS file is overloaded, but the last result is a mess.

11. Public website structure
The so-called "website structure style" mainly refers to the style of the most out-of-box Div. Generally, the width of the website is limited (960 ~ 990), there is also the layout of the column layout of the website, the style here is only for the main structure, such as left_part, or right_part; also includes some public structures of the website header, the style structure at the bottom.

I strongly recommend that you only set the width and height of the public structure and set floating attributes. Do not add the margin or padding attribute to the structure style. This will greatly reduce the reusability of the public structure of the website!

12. Fine Structure of a single page
If all of the above 11 items are well structured, you can easily and quickly compile each specific page. Because 80% ~ 90% of styles can be used directly from the above 11 items (all of the above 11 items are website public styles ).

For medium-sized and large websites, it may take 3 ~ 4 days or even more time analysis page design, processing CSS Sprite, architecture site CSS, this time does not write any page, is to process the website (can be said to be) Unique CSS file. It is very important to think about CSS from the perspective of the whole site. This helps you avoid getting lost and write concise and efficient style code.

When we finish Items 1-11, we start to write pages. At this time, the pages of the entire website are basically in your mind, and you will clear them when you start: which page I am working on, what kind of position I play in the whole website, how does the CSS of this page affect the CSS of the whole website, and how to deal with the style here (separation, merge or independent.

In general, in my personal experience, even if the page looks complex, the Code overhead is very small. The new Code overhead has three places: one is to separate some styles into the "website CSS style Library", and the other is to merge the CSS sprite styles used in everything with other styles; third, there are some fine and complex styles. These are the last part of the CSS file architecture, "the fine structure of a single page". What is the fine structure of a single page, such as a style, it can be said that it is a fine structure, and a new writing style needs to be developed independently (YesAppropriateSeparation, note the word "appropriate ):

For example, when the mouse is displayed, the red dotted box style, scissors, rough border projection, the most favorable logo, and some buttons are in a fine structure. We need to write a style on the page separately. Although theoretically, we can achieve this by using separation, but the overhead of HTML code is too large at this time, it is not suitable for separation. Here we should honestly write the style. Here, naming should follow the content rather than the attribute itself. We can use the same front-end prefix on a single page category to avoid style conflicts ~~

Original address: http://www.zhangxinxu.com/wordpress? P = 944, from Zhang xinxu-xin space-xin Sheng live, visit more excellent technical articles from the original source. Author: Zhang xinxu, welcome to my personal website. Iv. Applicability

Some items seem good, but they do not apply. Through the above CSS architecture, I can control the style of the website to be very simple and efficient (of course, the designers and background engineers need to work together), but for others, using this architecture may have no such effect, but it may be worse. As mentioned above, this architecture is developed by myself based on my own writing, layout, and even personality, with a clear personal mark.

For example, I am a person who advocates Adaptive Layout (Fluid layout) and is fully adaptive control. However, a large part of my peers are fixed layout (pixel-level compatibility, computing ). Although fixed layout has its advantages, I am very criticized for its CSS code consumption and page scalability. Obviously, this is not applicable to my architecture.

Secondly, many page development engineers who have just started to use CSS do not have a thorough understanding of CSS attributes and often write unnecessary redundant code. For them, the architecture of CSS files is indeed very difficult.

To be honest, I am not optimistic about the adaptability of my CSS architecture. First, I am lacking in expression and have not demonstrated the essence of the architecture, second, this architecture requires a lot of control mechanisms. This control is subject to the skill of designers, website architecture, and CSS engineers. Once styles flood, this architecture is meaningless, however, once controlled, the CSS performance of the website is guaranteed to be ahead, and these require the control of well-experienced CSS engineers and excellent designers,ProgramCollaboration. Although applying the architecture I have demonstrated will cause problems due to unfamiliar or insufficient control, some concepts and ideas in the architecture should be enlightening, this is the meaning of this article.

I am just a beginner. I know that many front-end developers with profound skills have better and more widely adapted front-end architectures. If you are lucky enough to come here, you are welcome to share your insights and insights. Also, if you think your opinion is unreasonable in this article, you are also very welcome to comment or mail (zhangxinxu@zhangxinxu.com) to correct. We need to improve in constant communication.

original article, reprint please indicate from Zhang Xin Xu-xin space-xin Sheng live [http://www.zhangxinxu.com]
This article address: http://www.zhangxinxu.com/wordpress? P = 944