High-Maintenance CSS

1, how to effectively organize CSS code.

all CSS can be divided into two main categories: generic and Business classes. Place their code in a different directory.

(1) The General Category folder should have Default.css, common.css, ie-style.css style files and so on.

The Default.css file is the default style for resetting elements in order for the elements to have a uniform appearance in each browser.

The style and some basic styles of common modules are placed in the Common.css file. Common modules include the style of common components such as page dialogs, cue boxes, and common UI modules such as page header, bottom, sidebar, and so on, including global page layout settings, font settings, background and foreground colors, and some public class classes.

A public class is used to set the text is not visible, the code is as follows:

           . text-hide{                font:0/0 a;                 Color: transparent;                 Text-shadow: none;                 background-color: transparent;                 Border:0;            }

the Ie-style.css file has a style that is compatible with the older version of IE browser. This style file is referenced in the page using the conditional annotation method unique to IE browser. The sample code is as follows:

            <!--[IF lt IE 8]>            <link rel= "stylesheet" href= "Ie-style.css"/>            <![ ENDIF] -

(2) specific business modules: Different modules of the style files are placed in different folders. The granularity of the split module does not have a standard, in principle, as far as possible to ensure that each module corresponding style file line number of not more than 200 lines.

The file organizes the style declarations according to a certain rule:

The order of style declarations should be handled according to the hierarchical relationship of the elements in the module, for example, should be defined starting from the parent element. If the element is of the same level, the corresponding style is defined from top to bottom and left to right according to the element's position on the page. When multiple elements share the same declaration, the common style is declared first, and then the individual style is declared.

Use less and sass to write CSS styles:

Less and sass are dynamic style languages that give CSS the properties of dynamic languages such as variables, inheritance, functions, etc., and can use CSS-style precompiled techniques to produce the final CSS style.

Less:lesscss.org

Sass:http://sass-lang.com

2, use CSS Reset: Unified browser Display effect.

the way to reset an element's default style is called the CSS reset technique.

The first resets the style file--undohtml.css, which has 6 style rules, with the following code:

: Link,: Visited{text-decoration:None; }UL, Ol{List-style:None; }H1,h2,h3,h4,h5,h6, Pre, form, body, HTML, p, BLOCKQUOTE, fieldset, input{margin:0;padding:0; }a img,: Link img,: visited IMG{Border:None; }Address{Font-style:Normal; }

another style reset scenario. This scheme is simple, but it increases the complexity of subsequent development, and does not effectively improve the overall development efficiency. The code is as follows:

            {                margin: 0;                 padding:0;            }

currently using the more extensive reset program has Eric Meter developed by the reset Css:http://meyerweb.com/eric/tools/css/reset and Yahoo front-end technical team developed by Yui Reset css:http:/ /yuilibrary.com/yui/docs/cssreset

3. Sort the CSS style definition.

if the CSS properties are sorted according to certain rules, the duplicate definitions of attributes can be prevented during the development process, and the code's inspectors can see the CSS style definitions very clearly, and more crucially, they can quickly locate specific style properties during subsequent maintenance.

(1) Sort by type group

This sort is the most complex, but also the most reasonable way. Andy Ford has recommended a sort of grouping by type, he divides CSS properties into 7 categories: Display and floating (Diaply&flow), positioning (positioning), Dimensions (Dimensions), border-related properties (Margin, Padding, Borders, Outline), font style (typographic styles), background (backgrounds), other styles (Opacity, Cursors, Generated, Content). Andy Ford gives an example: Http://fordinteractive.com/2009/02/order-of-the-day-css-properties.

(2) Alphabetical order

The rule is to sort by the first letter of the attribute from A to Z, ignoring the browser prefix (such as-webkit-、-Moz-、-o and-ms-).

(3) Sort by defined length

The arrangement can be from long to short, or from short to long (less used).

A free CSS sorting tool: Csscomb:http://csscomb.com. Csscomb provides plug-ins for online tools and mainstream code editors.

4, reasonable use of the weight of CSS: improve the reusability of code.

The CSS weights refer to the precedence of the selectors, and the higher priority CSS styles override the lower priority style, and the higher the precedence, the higher the weight.

The CSS weights are calculated using the following rules:

1) count the number of ID selectors in the selector (=a,a equivalent to 100).

2) Calculate the number of class selectors, property selectors, and pseudo-class selectors in the selector (=b,b equivalent to 10).

3) count the number of label type selectors and pseudo-object selectors in the selector (=c,c equivalent to 1).

4) Ignore global selectors (* equivalent to 0).

5) The weights of the styles set with the Style= "" property in the label are equivalent to 1000.

6) The weight of the!important is the highest.

The base selector has such a priority:id> Class | pseudo-Class | Property selection > Label type | pseudo-object > wildcard character.

If the weights of the two selectors are the same, it can be judged by the nearest principle, and the last defined selector will be adopted.

The principle of defining selectors is to minimize the weight of the selectors:

1) Try not to use the ID selector in CSS styles.

2) Reduce the hierarchy of sub-selectors

The process of reducing the hierarchy of selectors is the process of reducing the overall weight of the selectors. At the same time, the lower the level of the sub-selectors, the less dependent on the HTML structure.

3) using a combined CSS class selector

Using CSS selector combination, the developer can avoid the problem of CSS style overlay, avoids the process of calculating the weight of the selector, improves the reusability of the code, and reduces the number of classes.

The concept of composition is to separate the mutable part of a complex parent class from the stable part, and the stable part as the principal class, and as for the variable part, it is divided into several simple classes according to logic, and there is no inheritance relationship between the class and the class.

A simple example: In the example, the constant is the font size of the text, variable is the color of the text.

<!--This is the HTML code -      <DivID= "Test"class= "Test">this is a<spanclass= "Common">Important Words</span>, please<spanclass= "Important">Do not delete.</span>      </Div>

            /** *            {                font-size: 40px;            } {color: #ccc;                }                         {color: #f00;                }                         

5, CSS code compatibility: How to be compatible with IE browser.

Additional code added for compatibility with legacy browsers is called hack code.

Here are some practical ways to be compatible with IE:

1) familiar with the common style compatibility issues in IE browser

The Internet Explorer home page with compatibility issues is set in IE8 and the following versions. Internet Explorer compatibility issues are generally divided into two categories, one is the browser itself bug, the other is incompatible with the standard, or does not support the standard.

2) Detach style compatible code

The general style hack method includes the hack of the selector and the hack of the style properties.

The best practice is to centrally manage compatible code. In IE, you can use Add comments to allow different browsers to load different style files to achieve the purpose of compatible code and normal code separation.

  <  link 
     rel  = "stylesheet"   media  =" screen "  href  Span style= "COLOR: #0000ff" >= "Style.css"  />  <!-- [if IE 8]> <link rel=" stylesheet "media=" screen "href=" Ie8.cs S "/> <! [EndIf]       -->  <!-- [if IE 7]> <link rel= "stylesheet" media= "screen" href= "Ie7.css"/> < ;! [EndIf]  -->   

To increase the priority of a compatible style, you can add different style classes for different browsers on the root element (

      <!--[if IE 7]>-      <!--[if IE 8] -

6, EM, px or%

Official documents of the website mainly divides the dimension unit into relative length unit and absolute length unit two kinds. Relative unit length is divided into font relative units and Windows relative units, font relative units include: Em, EX, CH, REM, Windows relative units include: VW, VH, Vmin and Vmax. Absolute length units are defined in fixed lengths and are used in physical units of measure, including: cm, MM, in, PX, PT, and PC.

1) PX: is an abbreviation for pixel, which represents pixels.

2) Em:em is a relative unit. The equivalent of a calculated font size value on an element, such as a 2em representation, is equal to twice times the size of the font applied to the element.

3) Percent:% is calculated relative to the parent element size .

Best Practices:

1) Try to set the relative size: if the desired size changes as the font changes, you should use EM, and if the desired dimensions change with the size of the parent element, you should use a percentage. For example: Setting line height generally uses EM, while setting the height or width generally uses a percentage.

2) Use absolute dimensions only in the case of a predictable element size

3) Use EM to set the font size: You should avoid setting more than two levels of font relative dimensions when using em to set the font size. REM units are introduced in CSS3, and REM is calculated relative to the font size of the root element.

High-Maintenance CSS