1.Reset
Really, always use a reset, whether it's the Eric Meyer Reset, the YUI Reset, or your own custom reset, be sure to use it.
This can be as simple as removing the margin and padding attributes from all elements:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
Eric Meyer and YUI's Resets style are great, but for me, they go too far. I want you to clear everything before redefining many properties of the element. This is what Eric Meyer recommends. If there's a more efficient way to use it, you shouldn't just take his style file and drop it directly into your own project - refine it, rebuild on it, make it your own .
Oh, please don’t do this again:
* { margin: 0; padding: 0; }
It is used in too many places. If you remove the padding of a radio button, what do you think will happen? Form elements sometimes have a funky look, so it's best to leave them as they are.
2. Sort alphabetically
a little test
Of the two examples below, which one do you think can find the location of the margin-right attribute faster?
Example 1
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
Example 2
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
Don't tell me that Example 2 is not as fast as Example 1! By sorting the properties of these styles alphabetically, the coherence you create will help you reduce the time you spend looking for a specific property.
I know some people organize the order this way, and others use another way to organize the order of styles. But at my company, we unanimously decided to sort things alphabetically. This approach will definitely work for you when you are developing code with others. I hate it every time I see a style sheet not sorted alphabetically, because they look messy and disorganized...