Standard naming css

css3 has been released, and many WEB front-end engineers have begun to try to use this technology. How do we evaluate the ability to write CSS? We will not judge by right or wrong. We may use words such as "good", "average", "terrible" to describe it. What is the most difficult thing about CSS? Is it the compatibility of major browsers? Is it the simplicity and efficiency of the code? Front-end engineer Wu Zhi once said: CSS is not a difficult technology, the difficulty lies in how to standardize the naming. The project is completed by individuals, and engineers can name the css according to their own habits. In teamwork, irregular naming may cause conflicts, thus affecting the progress of the entire project. Below, Lingnan Network will teach you step by step how to name css in a standardized way.

　 There are many ways to divide css, such as by function: store the css of the font in font.css; store the css that controls the color in color.css; store the css that controls the layout in layout.css; or by area Block division: store the header css in header.css; store the bottom css in footer.css; store the sidebar in sidebar.css; store the theme in main.css. Different perspectives have their own advantages and disadvantages.

Lingnan Network recommends a css division method: base.css+common.css+page.css. All the styles of a website are divided into three categories according to their functions: base, common, and page. The final style expression of any web page is completed by these three.

　The base layer is the lowest layer that the website page style depends on. It is relatively stable and requires no maintenance. We generally store the following content in base.css.

　 /*css reset Because each browser will have default values ​​for some tag attributes, it is necessary to set some tag attributes 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 layout*/
.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 layer and provides component-level CSS. We can split the elements on the page into small "templates" with relatively independent functions and styles. Some of these templates are rarely repeated, and some are repeated in large quantities. We can divide a large number of repeated styles into Extract it and store it in the common.css style. If a website needs to use many repeated titles, we can write it like this:

　.h2{font-size:14px;font-weight:bold;}

　The page layer is at the page level. It is recommended that all page layers The css is stored in page.css. You can add comments according to the page and write it in blocks for easy maintenance. Such as:

/*About us*/
.about-text{font-size:12px;}

/*Contact information*/
.contact-text{font-size:14px;}
The base layer is basically There is no need for maintenance. The modification of the common layer will not be very large. The page layer code may be jointly developed by multiple engineers. So how to avoid conflicts? We can avoid conflicts through naming. CSS naming can be standardized as: camel nomenclature and underline nomenclature. Camel nomenclature: Capitalize the first letter of each word, starting with the second word. Such as dropMenu, subNavMenu. Underline nomenclature: separated by dash - or underline _, such as drop-menu, sub_nav_menu.

　If the project is completed by multiple engineers, we can assign an independent naming ID to each person. For example, Lingnan Network is called linknan. We can assign the two letters at the beginning of the name as an independent naming id, such as: .ln-artice li. This avoids conflicts caused by repeated naming.