Website page Construction: teaches you how to standardize the naming of css

Css3 has been released, and many WEB Front-end engineers have begun to use this technology. How can we evaluate the ability to write css? We will not judge right or wrong. We may use words like "good", "General", and "bad" to describe them. What is the most difficult part of CSS? Is it compatible with various browsers? Is the code concise and efficient? The front-end engineer's five fingers once said: css is not a difficult technology, but the difficulty lies in standardized naming. A project is completed by an individual. Engineers can name css based on their habits. In team cooperation, nonstandard naming sides may cause conflicts, which may affect the progress of the entire project. The following Lingnan network hands-on teaches you how to standardize the naming of css.
 
Css can be divided into multiple angles, for example, by function: Save css in font.css.pdf to save css in color.css; or save css in layout.css. Different Angles 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 by function: base, common, and page. The final style performances of any webpage are completed by these three aspects.
 
The base layer is the underlying layer for website page styles, which is relatively stable and does not require maintenance. We generally store the following content in base.css.
 
/* Css reset because each browser has a default value for some tag attributes, you need to set some tag attributes in a unified manner */
 
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 ;}
 
/* Locate */
. Tl {text-algin: left ;}
. Tc {text-algin: center ;}
. Tr {text-algin: right ;}
 
/* Length and 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. . For example, if a website requires a lot of repeated titles, we can write them as follows:
 
. H2 {font-size: 14px; font-weight: bold ;}
 
The pagelayer is the page level. It is recommended that all the CSS pages of the pagelayer be stored in page.css. You can add comments to the page and write them in parts to facilitate maintenance. For example:
 
/* About us */
. About-text {font-size: 12px ;}
 
/* Contact information */
. Contact-text {font-size: 14px ;}
The base layer is basically not maintained, and the scope of modification to the common layer is not very large. The page Layer Code may be developed by multiple engineers. How can we avoid conflicts? We can avoid conflicts by naming them. Css naming rules can be defined as: camel naming and underlined naming. Trigger name: starts from the second word and starts with an uppercase letter. For example, dropMenu and subNavMenu. The underline naming method is separated by hyphens (-) or underscores (_), such as drop-menu and sub_nav_menu.
 
If the project is completed by multiple engineers, we can assign each person an independent name ID. For example, Lingnan network is called linknan. We can assign two letters at the beginning of the name to independent name IDs, such as. ln-artice li. In this way, conflicts can be avoided due to repeated names.
 
The above experiences only inspire you and hope you can learn and use them. Post published by Lingnan network http://www.linknan.com, reprinted please keep the link.