CSS Content Planning

Article source: Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=944

about how to deal with the Web site's CSS, each site practices are different, this with the nature and size of the site, the company's predecessors left a different specification, and CSS engineers have different horizons. Because I have limited experience, I know very little, can only say some superficial amateur content, inaccuracies are welcome to point out.

In terms of CSS files, some sites are divided into Header.css, Body.css, FOOTER.CSS, do not evaluate;
Some are divided into Reset.css, main.css, content.css, not to do evaluation;
Some are divided into common.css, and then each kind of page a CSS, such as HOME.CSS (homepage), Album.css (Album page), Message.css (in the station letter page), Blog.css (log page), etc., do not evaluate;
Some are divided into base.css, then each activity page a separate CSS, etc., do not evaluate;
There is a direct CSS embedded in the page, rather than external links call, do not evaluate.

These different treatment methods, there is nothing right and wrong points, only suitable for unsuitable. Every method has its own reason, so I am not qualified to do any evaluation.

In terms of the content of each CSS file, there will generally be a long CSS reset (style reset), and then there is a unified prefix, named longer style content, like Renren's part of the style:

With long naming, uniform parent naming avoids the wrong style when it comes to conflicts. Do! I used to be so, too.

Third, how do I structure the Web site CSS

First of all about CSS files, I generally only use a file, this is not about the size of the site, the larger the site, in a sense, the advantages and potential of my practice will reflect the more obvious. I this kind of single CSS file approach is suitable for web2.0 website, such as SNS website (happy, everyone, white society), muttering net, shrimp net, where guest this kind of website, if is the portal website, sorry, definitely not suitable.

Let website single css who will, the key is why you can use a single CSS file, this CSS file is not very large, if a site has 400 pages, then this CSS file will not be hundreds of K. Non-also, in the Web page style consistent, in the case of a good web system structure, CSS files can be controlled very small, and high performance, while the page extensibility is also very good. The following is the beginning of the 1.1-point display, more content, need to slowly ~ ~

1. Overall overview

Page layout and article content display needs, I have made a picture of the overall architecture, see:

2. About CSS Reset
CSS Reset (CSS resetting) is basically not required, at least 80% of the CSS reset is not necessary, but added the page CSS overwrite, especially like happy Net *{margin:0;} This kind of amateur practice is more undesirable (instead of destroying a lot of UI compatibility, such as mandate box, etc.). I'm not a disdain. css reset, some common tags I will simply reset, and will avoid overwrite (style rewrite), to ensure the most streamlined style, rendering the most efficient. The following code example:

body{    line-height:1.4;    Color: #333;    font-family:arial;    font-size:12px;    background:white;} input,textarea,select{    font-size:12px;    font-size:100%;        font-family:arial;    Font-family:inherit;} body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{    margin:0;} h4,h5,h6{    Font-size:1em;} ul,ol{    padding-left:0;     List-style-type:none;} /*image with no-border*/a img{border:0;} img{border:0;}

This is all I have for CSS reset. This is enough, I do not encounter any compatibility issues, do not blindly follow the mainstream approach, which is enough.

3. About CSS Common style library
I have mentioned the CSS common style library in the article "Separation of CSS styles". The so-called CSS Common style library is the CSS style library that can be used on any website. The "Re-separation of CSS style separation" article only shows a part of the CSS same style library, the complete common style library is as follows (you can rename or add to delete some styles according to your preference):

. 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: ' The song Body ';}. fw{font-family: ' Microsoft Jas Black ';}. 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;}. pb2{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;}. Vh{visibility:hidden;}. vv{visibility:visible;}. lh14{line-height:14px;}. lh16{line-height:16px;}. lh18{line-height:18px;}. lh20{line-height:20px;}. lh22{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 above style is simple classification, in a sense, CSS library and JS library belong to something similar.

For this gallery, you can embed the following code directly within your page header tag:

<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 Save as]). You can modify, if you can keep one of my personal information, it is very grateful ~ ~

4, web site CSS style Gallery
The styles here are specified based on the current actual project content. For example, the text link color is what, the text link passes through the style, some commonly used background color style, commonly used border style and so on, as well as some aspect and so on. In my experience, the Web site CSS style Library can also be structured as the following:
① site Common colors, especially link colors
② site Common background color (I used to bg+ color first 2 letters, for example, bgf7 means background: #f7f7f7;)
③ site common border colors, which are similar to the margin property in the CSS Universal Library, need to be split, for example. BBDD represents the border-bottom:1px solid #ddd; Each person's naming habits are different, but as simple as possible, you can even like Google, directly two letters (mixed-case) representation. In addition, be sure to inform the designer, the border color should not be more, not by feeling, to have sacrifices, that is, if you used the #cecece border color, the back of even use #d0d0d0 better look, please use #cecece instead, this is the team collaboration.
The single margin property left by the ④ site, for example, a div is larger, has a separate margin-top:35px property, OK, this property is placed in the Web site CSS style library, to . mt35{margin-top:35px;} reserved for use where similar layouts or needs are followed.
⑤ Web site Legacy of single padding properties, for example, double-column adaptive layout, whether it is floating adaptive, or absolute positioning adaptive, all need to use the Padding-left value, at this time the Padding-left more than a single style, can be extracted, in the form of a Web site style library exists. Remember, it's a single attribute, and you can't extract a single padding value from a common element, or you can dig yourself into a fire pit.
⑥ Web site left the Width property, in the fluid layout thought, the width is limited, is precious, need to make good use of.
Some of the height properties commonly used by the ⑦ site refer to some altitude values, such as height:18px; height:20px; height:24px; height:50px; height:100px; height:200px; etc.

Remember a principle: the style of the Web site Common elements (buttons, navigation, tabs) must not be separated as a Web site CSS style library.

5, website general small icon Style set
Small icons of the style of the merger is generally good, because of its rules can be followed, so often in the CSS file on the location of the small icon to see the CSS merge style, which is very common in the SNS site. The general merge style part style {background:url(xx.png) no-repeat;} is, the detached part of the style is {background-position:x, y;} , in terms of implementation, I think there is not much to say head, just name some of their own views. In the small icon style naming, my advice is not to associate the content of the picture, such as a photo album of the logo, should not use ialbum such a name. There are three reasons:
1. Think about the name of the picture kill N multi-brain cells
2. Name longer, take up the number of bytes, that is, the CSS file size
3. Also the most important, post-maintenance. Imagine, if the icon of a future album is no longer used, the location of the original album icon can be replaced by other small icons (such as RSS small icon)? Theoretically, in addition to the necessary HTML substitutions, we need to re-modify the name of the icon style, the name of Ialbum→irss, and often replace it with a new icon directly behind it.

My current practice is to use an infrequently used label as a small icon for the site of special tags, such as the S-tag, or U-tag, I am accustomed to the small icon alone as a small icon sprite, each icon placed in the 20*20 pixel lattice. In this case, I use the matrix naming method. Naming is only associated with a location, for example, I use the U tag as a small icon for the entire site, then follow the icon's location (assuming a row of 20 icons), I'll name it: u00 , u01 , u02 ... u019 ,, u10 u11 ,... u119 ...。 The advantage of this naming is that you don't have to worry about which location is the icon, not the naming conflict, and you don't need to rename it in the case of small icon positions and content changes.


For example, the meaning of the label u113 is actually u(1,13) , this small icon naming method I call "small icon matrix naming method". This naming is slightly inadequate in that you need to open the source file when using a small icon or to accurately query the corresponding class with comments.

6-10. General website Style
Here the "common Web style" can be said with the "Web site Common Style library" the most opposite of the two parts. The common style of web site refers to the "independent elements" of the general style, the so-called "independent elements" refer to the site common navigation, menus, buttons, tabs, text box decoration, picture decoration, fillet processing and so on. These "independent elements" of the style must not be separated and classified into the "Web site Common Style Library", otherwise, will leave you endless pain in the future!

I almost never set the button or the navigation width, and are wide-adaptive, which can greatly save the cost of the sprite background image and CSS code. There have been many discussions before, and there is not much to say.

Web site common style of code in the entire CSS file occupy the proportion is quite large, if your CSS file found that the CSS common style only a small part of the entire CSS file, especially when the site project is large, it needs to be vigilant, the final result is the CSS file overload, and finally a mess.

11. Website Public structure Style
The so-called "website structure style" mainly refers to the most outer box div style, generally restricts the width of the site (960~990), there is the site's column layout style, where the style is only for the main structure, such as Left_part, or Right_part Also includes some common structure of the website's head, the style structure at the bottom, etc.

I strongly recommend that public structures be set to a height of only fixed widths, setting floating properties, and not adding margin or attributes to the structure style padding , which can make the reuse of the public structure of the site much less!

12. Fine Structure of single page
If the above 11 items are very well structured, you will be very relaxed and very quick when writing each specific page. Because the 80%~90% style can be used directly from the above 11 items (the above 11 items are all common Web style).

For medium-sized large sites, we may have to spend 3-4 days or more to analyze the page design, processing CSS Sprite, the architecture of the Web site's CSS, this period of time not to write any page, is to process the Web site (can be said) the only CSS file. The so-called "sharpening does not mistake wood work", standing in the whole point of view to think about CSS is very important, this can let you avoid getting lost, help write thin and efficient style code.

When we have finished 1-11 items, we start to write the page, at this time, the entire site page is basically in your mind, you are in the hands of the moment will be cleared: what I am now doing is which page, in the whole site play what status, this page of CSS on the whole site of the CSS has any impact, The style here is how to deal with (separation, merger or independence) and so on.

In general, in my personal experience, every page, even though the page looks complex, has a very small code overhead. There are three places to add code overhead: one is to separate some styles into the Web site CSS style library, and the other is to combine the styles of CSS sprites used in everything with other styles, and the third is a fine and sophisticated style, which is the last part of the architecture of the CSS file "fine structure of a single page", What is a single page of fine structure, such as the style, can be said to be fine structure, need to separate out the new writing style (can be properly separated, pay attention to the "appropriate" word):


For example, the mouse after the display, the red frame style, scissors, thick frame projection, the most preferential mark, some buttons, etc. are fine structure, we need to write a separate style on the page. Although in theory, we can achieve this effect using separation, but at this time the cost of HTML code is too large, it is not suitable for the use of separation, here is the honest writing style. In this case, naming should follow the content rather than the property itself. We can avoid style conflicts by using the same front-end prefixes on a single category page ~ ~

Iv. About Applicability

Some things look good, but they don't apply. Through the above CSS architecture, I can control the style of the site is very streamlined and efficient (of course, designers and back-end engineers to work together), but, for others, apply this architecture may not have this effect, it may be worse. As mentioned earlier, this architecture is my own groping out, according to their own writing, layout ideas, and even character formation, with a clear personal imprint.

For example, I am a self-adaptive layout (fluid layout) person, is a full adaptive control, however, a large part of the peer is a fixed layout (pixel-compatible, calculated). Fixed layout has its advantages, but the consumption of its CSS code and the extensibility of the page is very much criticized, obviously, this is not applied to my structure here.

Secondly, a lot of CSS just get started page development engineer to understand the CSS properties is not thorough, often write some unnecessary redundant code. For them, the architecture of the CSS file is really laborious.

To tell the truth, I am not optimistic about the adaptability of my own CSS architecture, one is the lack of heat in the expression, not the essence of a good display architecture, two is because the architecture itself requires a lot of control, this control is subject to the designer, Web page architecture, CSS engineers own skills, once the style flooding, This architecture is meaningless, but, once controlled, the Web site on the CSS performance this piece of the lead, and these need a good eye-opener CSS engineer to control, need excellent designers, programmers work together. Although the architecture I have shown will be problematic due to lack of familiarity or lack of control, there are some concepts in which some ideas should be instructive, which is what this article is all about.

I'm just a rookie, I know, a lot of really strong front-end developers have a better and more extensive adaptation of the front-end architecture, if you are fortunate to come here, welcome to share some of your insights and understanding. Also, if you feel unreasonable in this article, you are welcome to comment or email ([email protected]). We need to improve in the constant communication.

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=944

CSS Content Planning