CSS Writing Tips

1. Reset

First of all, it's very serious to tell you that you always have to reset some categories. Whether you are using Eric Meyer Reset, YUI reset or you write your own reset code, as long as the use of the right.

It can simply remove the padding (padding) and margins (margin) of 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 very powerful, but for me, they go too far. I think you finally need to reset everything and then redefine the attributes of all the elements. That's why Eric Meyer recommends a more efficient use (reset style sheet), and you don't just use his reset style sheet and drag it into your project. Adjust it (the reset style sheet) to create your own reset style sheet.

Oh, please stop using:

* {margin:0; padding:0;}

Spend more time making it, when you remove the padding (padding) What do you think will happen to the radio button? Table cells are capable of doing fashionable things, so the most effective way is to separate them.

2. Sorting

A small test

This example is to let you think about how to find the right margin property 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; pos. ition:relative; z-index:101;}

You can't tell me example#2 can't find the right margin property faster. Sort your element attributes according to the alphabet. Consistent creation of your CSS will help you save the time spent looking for a special attribute.

I know some people use this method to organize code, and others to organize it in another way, but in my company, we make a consensus decision that all the code will be organized in alphabetical order. It must be helpful to organize your code in concert with others. When I hit a cascading style sheet with properties that aren't sorted alphabetically I'll shrink every time.

3. The Organization

You should organize your stylesheets so that the relevant content is put together and it's easier to find what you want. Use more effective annotations. For example, this is how I construct my cascading style sheet:

/*****reset*****/

Removes the padding (padding) and margins (margin) of the element.

/*****basic elements*****/

Define the style of the basic elements: Body, H1-H6, UL, OL, A, p, etc.

/*****generic classes*****/

Define a simple style, as if one side of the float, remove the bottom margin of the element, etc.

Of course, most of them are irrelevant to the semantics we want, but they are necessary to handle code efficiently.

/*****basic layout*****/

Define basic templates: header, footer, etc. Help define the basic elements of a Web page layout

/*****header*****/

Define all Hearder elements

/*****content*****/

Define the elements in all content boxes

/*****footer*****/

Define all elements of footer

/*****etc*****/

Define additional selectors.

By annotating and grouping similar elements, you will find what you want faster.

4. Consistency

Whatever way you decide to write code, keep it consistent. I've been bored and tired of arguing about how to write all the CSS in 1 vs. multiple lines. There is no need to argue. Everyone has their own point of view, so choose a work style that you like and keep it consistent across all stylesheets.

Personally, I'm going to use the combination of the two ways. If a selector exceeds 3 properties, I will truncate it to write in a multiline way.

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 the way you like to work and stay consistent.

5. Start from the right place

Don't try to approach your style sheet until you're done with the markup language.

When I am ready to split a Web page, I need to preview and mark all documents between the body and the closed tag of the body before I create the CSS file. I will not add additional DIV, ID, or class selector. I will add some general Div, just like hearder, content, footer. Because I know these things are real.

Use CSS child selectors to specify child elements; don't just mechanically add classes or ID selectors to elements. Remember: Without a good formatting document (or tag structure) CSS is worthless.