CSS Writing 5 tips

Source: Internet
Author: User
Tags end header html tags relative reset wrapper
Use CSS Annotations to group CSS, so that the structure is clear and also beneficial to collaborative design.

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.



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.