Write excellent CSS Code

Source: Internet
Author: User
Tags reset

CSS is not difficult to learn, but in large projects, it becomes difficult to manage, especially the different people in the CSS writing style slightly different, the team is more difficult to communicate, this summed up some how to achieve efficient and neat CSS code principles:
1. Use reset but not global reset
The default properties for different browser elements are different, and using reset resets some of the browser element's default properties to achieve browser compatibility. Note, however, that you should not use the global reset:
*{margin:0; padding:0;}
This is not just because it is a slow and inefficient method, but it also causes unnecessary elements to reset the outer and inner margins. In this recommendation to refer to Yui Reset and Eric Meyer practice. I have the same view as Eric Meyer, reset is not the same, but also needs to be tailored to the different needs of the project to make appropriate changes to achieve browser compatibility and operational convenience. I use the reset as follows:
/** clears the inner and outer margin **/
Body, H1, H2, H3, H4, H5, H6, HR, p,
BLOCKQUOTE,/* Structural elements structural elements * *
DL, DT, DD, UL, OL, Li,/* list elements elements *
Pre,//formatting elements Text Format element * *
form, fieldset, Legend, button, input, textarea,/* form elements table cell
TH, TD,/* Table elements form elements * *
img/* img Elements Picture element */{
Border:medium none;
margin:0;
padding:0;
}
/** Set Default Font **/
Body,button, input, select, textarea {
font:12px/1.5 ' song Body ', Tahoma, Srial, Helvetica, Sans-serif;
}
H1, H2, H3, H4, H5, h6 {font-size:100%;}
Em{font-style:normal;}
/** Reset List Element **/
UL, ol {List-style:none;}
/** to reset a hyperlink element **/
a {text-decoration:none; color: #333;}
a:hover {text-decoration:underline; color: #F40;}
/** Reset Picture Elements **/
img{border:0px;}
/** Reset TABLE Element **/
Table {border-collapse:collapse; border-spacing:0;}

2. Good naming habits
There is no doubt that messy or semantically-named code, who will be crazy to see. It's like this code:
. aaabb{margin:2px;color:red;}


I don't think that even a beginner would have named a class like that in a real project, but have you ever thought that the code is also problematic:
The problem is that if you need to change all the original red fonts to blue, the changes will change to the style:

Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

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.