Five key points for CSS perfect code

If you are a webmaster, you must want to enhance their website portability, and code simple, clean, now all the sites, 80% are using DIV+CSS to frame.

Perhaps everyone will write, or use CSS, but many times we may not consider, resulting in code duplication.

Today we'll discuss how to write the perfect CSS code.

One, about CSS Reset

First of all, it's very serious to tell you that you always have to reset some categories. Whether you're using it or not? Eric? The Meyer? Reset, YUI? Reset or the Reset code you wrote yourself, just use it.

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? The Meyer? Reset and Yui? Reset is 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 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.

Second, the Order of CSS Properties

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;

position:?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.

Three, CSS style of 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 base element: Body,?h1-h6,?ul,?ol,?a,?p,?

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

Define a simple style, like a floating one side,? Remove the bottom margin of the element,? Of course, most of them are irrelevant to the semantics we want, but they are necessary to handle the code efficiently.

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

Define basic templates:? Header,?footer and so on.? 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.

Iv. Maintaining 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.

As far as I am concerned, I take one line.

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.

Five, starting 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 selectors. I will add some general Div, just like hearder, content, footer. Because I know these things are real.

By marking the document first, you will not encounter the doomed divities1 and Classitis2 trouble!/*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.*/(the original text is not translated).

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