Canonical naming CSS

CSS3 has been released, and many web front-end engineers have started experimenting with the technology. How do we evaluate the ability to write CSS? We may use the words "good", "General" and "bad" to describe the right and wrong judgments. What is the hardest thing about CSS? Is it compatible with all major browsers? is the code simple and efficient? Front-end engineers have said: CSS is not a difficult technology, the difficulty is how to standardize the naming. Projects are done by individuals, and engineers can name the CSS according to their own habits. In team work, the non-canonical naming side may cause conflicts that affect the progress of the entire project. The following Lingnan network teaches you how to standardize the naming of CSS.

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

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

The base layer is the lowest level of dependency on the Web page style, which is relatively stable and does not need maintenance. We usually store the following in Base.css.

/*CSS Reset because each browser has default presets for some tag properties, you want to set some of 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 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 tier and provides component-level CSS. We can split the elements of the page into a small piece of the function and style of the relatively independent "template", some of these templates are rarely duplicated, some will be a lot of repetition, we can have a large number of repeated styles extracted from the common.css style. If a website is going to use a lot of repetitive headlines, we can write it like this:

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

Page layer is the pages level, it is recommended that all page layers of CSS are stored in the PAGE.CSS, according to the page with comments, block writing, easy to maintain. Such as:

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

/* Contact information */
. contact-text{font-size:14px;}
Base layer is basically not maintenance, common layer changes will not be very large, page layer code may have multiple engineers to develop together, how to avoid conflict? We can avoid conflicts by naming them. CSS naming conventions can be: Camel nomenclature and the name of the dashes. Camel nomenclature: Starting with the second word, capitalize the first letter of each word. such as Dropmenu, Subnavmenu. The name of the line: With the underscore-, or underline _ delimited, 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 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.

