CSS tips: Five ways to help you write more professional CSS code

Core tip: Everyone can write CSS code, even if you have now let it work for your project. But can CSS be even better? Use these five aspects to improve your CSS, will make you appear more professional, also can make the code has good!

Everyone can write CSS code, and even you have now made it work for your project. But can CSS be even better? Use these five aspects to improve your CSS, will make you appear more professional, also can make the code has good!

One, 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 the 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 {Marg in: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 changes do you think the radio button will take? Table cells are capable of doing fashionable things, so the most effective way is to make them independent.

Second, sorting

A small test: this example is to let you think about how to find the right margin property faster?

Example#1<br/>div#header H1 {<br/>z-index:101;<br/>color: #000;<br/>position:relative; <br/>line-height:24px;<br/>margin-right:48px;<br/>border-bottom:1px Solid #dedede;<br/> Font-size:18px;<br/>}<br/><br/>example#2<br/>div#header H1 {border-bottom:1px solid # Dedede; Color: #000; font-size:18px; line-height:24px; margin-right:48px; position:relative; z-index:101;} <br/><br/>

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.

Third, 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*****/defines the style of the basic elements: Body, H1-H6, UL, OL, A, p, etc.
/*****generic classes*****/defines a simple style, as if on one side of the float, removing the bottom margin of the element, and so of course, most of them are not related to the semantics we want, but they are necessary to handle the code efficiently.
/*****basic layout*****/defines the basic template: header, footer, etc. Help define the basic elements of a Web page layout
/*****header*****/defines all hearder elements
/*****content*****/defines the elements in all content boxes
/*****footer*****/defines all the Footer elements
/*****etc*****/defines the other selectors. By annotating and grouping similar elements, you will find what you want faster.

Iv. 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%;} <br/>div#header Div.column {<br/>border-right:1px solid #ccc;<br/>float:rightright;<br/> Margin-right:50px;<br/>padding:10px;<br/>width:300px;<br/>}<br/>div#header H1 {float: Left position:relative; width:250px; }<br/>

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 selector. 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 divities1 and Classitis2 troubles that have already been destined!/*you only need to add in this stuff once you have begun to write the CSS and re Alize that you are going to need another hook to accomplish what your 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: Without a good formatting document (or tag structure) CSS is worthless.