1.Reset
First of all, let me tell you very seriously that you always have to reset certain categories. Whether you use Eric Meyer Reset, YUI Reset, or write your own reset code, just use it.
It can easily remove padding and margin 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 Reset and YUI Reset are both very powerful, but for me, they go too far. I think you'll eventually need to reset everything and then redefine the properties of all elements. That's why Eric Meyer recommends a more efficient use (reset stylesheet) and you don't just use his reset stylesheet, drag and drop it into your project. Adjust it (the reset stylesheet) and create your own reset stylesheet.
Oh, please stop using:
| * { margin: 0; padding: 0; } |
Spend more time making it, what do you think will happen to the radio buttons when you remove the padding? Form elements can sometimes do funky things, so the most effective way is to make them independent.
2. Sort
a small test
This example is to make you think about how to find the right margin 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; } |
You can't tell me that Example#2 can't find the right margin property faster. Sort your element properties alphabetically. Creating your CSS consistently will help you save time looking for a specific property.
I know some people organize their code one way and others another, but at my company we made a consensus decision that all code would be organized alphabetically. It definitely helps to work with others by organizing your code this way. I cringe every time I come across a cascading style sheet whose properties are not alphabetically sorted.
3.Organization
You should organize your style sheets so that related content is close together, making it easier to find what you're looking for. Use more efficient annotations. As an example, this is how I structure my cascading style sheet:
| /*****Reset*****/ Remove padding and margin from an element. /*****Basic Elements*****/ Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. /*****Generic Classes*****/ Defining simple styles, like floating one side, removing the bottom margin of an element, etc. Of course, most of them are not related to the semantics we want, but they are necessary to process the code efficiently. /*****Basic Layout*****/ Define basic templates: header, footer, etc. Help define basic elements of web page layout /*****Header*****/ Define all Hearder elements /*****Content*****/ Define all elements within the content box /*****Footer*****/ Define all Footer elements /*****Etc*****/ Define other selectors. By annotating and categorizing similar elements into groups, you'll find what you want faster. |
4. Consistency
No matter how you decide to write code, be consistent. I'm tired of the whole 1-line vs. multi-line CSS debate. There is no need to argue. Everyone has an opinion, so choose a way of working that you like and be consistent across all your stylesheets.
Personally, I would use a combination of both. If a selector has more than 3 attributes, I will truncate it and write it in multiple lines.
| div#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; } |
So find a way you like to work and then stay consistent.
5. Start in the right place
Don't try to get close to your stylesheet until the markup language is complete.
When I prepare to split a web page, before creating the CSS file, I need to preview and mark all documents between the body opening tag and the body closing tag. I won't add additional DIVs, IDs, or class selectors. I'm going to add some general DIVs, like hearer, content, footer, because I know these things exist.
By tagging the document first, you won't run into the already doomed troubles of divisions1 and classes2!
/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(Original text not translated).
Use CSS child selectors to specify child elements; don't just mechanically add a class or ID selector to an element. Remember: CSS is worthless without a well-formatted document (or markup structure).