1. CSS reset/Reset
You may need to understand what CSS resets first. Then how to write CSS reset it.
You can copy Eric Meyer reset, YUI reset or other CSS reset, but you should then change your project to your own reset.
Do not use * {margin:0; padding:0;}. I personally love to use, the original author mentioned that the use of this sentence does not apply to some elements such as radio buttons. However, there is no radio button in my blog, if there is, and again to the radio button to reset it well.
2. Arrange CSS in alphabetical order
Not in alphabetical order.
Div#header H1 {
z-index:101;
Color: #000;
position:relative;
line-height:24px;
margin-right:48px;
border-bottom:1px solid #dedede;
font-size:18px;
}
In alphabetical order.
Div#header H1 {
border-bottom:1px solid #dedede;
Color: #000;
font-size:18px;
line-height:24px;
margin-right:48px;
position:relative;
z-index:101;
}
The reason is that it's better to find a property. Personally feel OK, the difference is not too big. But maybe it will suit you.
3. Better organization of CSS structure
Use CSS Annotations to group CSS, so that the structure is clear and also beneficial to collaborative design.
/*****reset*****/
XXXXXXX{XXXXX}
XXXXX{XXXXX}
/*****layouts*****/
XXXXXXX{XXXXX}
XXXXX{XXXXX}
4. Maintain consistency
Don't talk nonsense. It's better to write all the properties of a selector on one line, or write a row for each property. You think it's OK.
Iv#header {float:left; width:100%;}
Div#header Div.column {
border-right:1px solid #ccc;
Float:rightright;
margin-right:50px;
padding:10px;
width:300px;
}
Div#header H1 {float:left; position:relative; width:250px;}
For example, I personally like to write in a row, because each row will make the entire document feel too long, easy to find. If you like to write a line, but to the other team, he likes every row, then what to do? In fact, it is very simple to take the CSS to the Consortium verification, it will have a result, will automatically convert to each row.
5. Mark the post CSS first
I don't understand that much. Probably understand that the HTML tags are ready to write CSS will be more difficult to make mistakes. For example, I write a page, first write a basic tag structure
<body>
<div id= "wrapper" >
<div id= "header" ><!--end #header-->
<div id= "Container" >
<div id= "Content" >
</div><!--End #content-->
<div id= "sidebar" >
</div><!--End #sidebarr-->
</div><!--End #container-->
<div id= "Footer" >
</div>!<--end #footer-->
</div><!--End #wrapper-->
</body>
Then just try to make the best use of the child selector, instead of adding a selector to which element you want to format.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
