Website page building: teach you how to standardize naming CSS

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

CSS3 has been released, and many Web front-end engineers are beginning to try to use the technology. How do we evaluate the ability to write CSS? We may use the words "good", "general" and "very bad" to describe it. What is the hardest thing about CSS? is the compatibility of the major browsers? is the simplicity and efficiency of the code? The front-end engineer Finger said: "CSS is not difficult technology, the difficulty lies in how the specification of the name." Projects are done by individuals, and engineers can name CSS based on their own habits. In teamwork, the nonstandard naming side can cause conflicts, affecting the progress of the entire project. Below the Lingnan network hands-on teach you how to standardize the naming of CSS.

CSS can be divided into a variety of angles, such as by functional division: the font of the CSS stored in the FONT.CSS, will control the color of the CSS stored in the COLOR.CSS, the control of the layout of the CSS stored in the LAYOUT.CSS; or by block: The head of the CSS stored in the HEADER.CSS, the bottom of the CSS stored in the FOOTER.CSS, the sidebar stored in the SIDEBAR.CSS, the theme stored in Main.css. Different angles have their own advantages and disadvantages.

Lingnan Network to recommend a CSS partition method: Base.css+common.css+page.css. All the styles of a website are divided into three categories by function: base, common, page, and the final style of any page is performed by these three.

Base layer is the lowest level that the Web page style needs to rely on, and is relatively stable without maintenance. We typically store the following in Base.css.

/*CSS Reset because each browser has a default preset for some label properties, you have to set the label properties uniformly.

body,div,dl,dt,dd,dl,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,{margin:0; padding:0;   TABLE{BORDER-COLLAPSE:COLLAPSE;BORDER-SPACING:0} ol Ul{list-style:none;}   * * Text typesetting/f12{font-size:12px; f13{font-size:13px;}. f14{font-size:14px}   /* Positioning//tl{text-algin:left; Tc{text-algin:center}. Tr{text-algin:right}   /* Length height//w10{width:10px; h10{height:10px} /* Margin/* m10{margin:10px}. ml10px{margin-left:10px;} p10{padding:10px; pr10{padding-right:10px;}

The common layer is located in the middle tier, providing component-level CSS. We can split the elements within a page into a small piece of function and style relatively independent of the "template", some of these templates are rarely repeated, some will be a large number of repetitions, we can be a large number of duplicate styles to be stored in the Common.css style. If a Web site uses a lot of duplicate headings, we can write this:

. H2{font-size:14px;font-weight:bold;

Page layer is the level of pages, it is recommended that all page layers of CSS are stored in the PAGE.CSS, can be based on the page with annotations, block writing, easy to maintain. As：

/* About us */about-text{font-size:12px;} /* Contact method */contact-text{font-size:14px}

The base layer is basically not maintenance, common layer changes will not be very large, page code may have multiple engineers open common development, that how to avoid conflict? We can use naming to avoid conflicts. The CSS naming conventions can be: Camel nomenclature and underlined nomenclature. Camel nomenclature: Start with the second word and capitalize the first letter of each word. such as Dropmenu, Subnavmenu. Underlined naming method: With the underline-, or underline _ separated, such as Drop-menu, Sub_nav_menu.

If the project is done by multiple engineers, we can assign each individual a separate named ID. If the Lingnan network is called Linknan, we can assign the first 2 letters of the name to a separate named ID, such as:. Ln-artice li. This avoids duplicate naming and creates conflicts.

The above experience just give everybody some inspiration, hope you ingenious. Article by Lingnan Network Http://www.linknan.com released, reprint please keep the link.