5 ways to write better CSS code right away

Of course, everyone can write CSS code, even if you have now let it work for your project. But can CSS be even better? Start using these 5 tips to improve your CSS!

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:

1. HTML, body, Div, H1, H2, H3, H4, H5, H6, UL, OL, DL, Li, DT, DD, p, blockquote,
2. 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 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.

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;
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.

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, like one side of the float, remove the bottom margin of the element, and so of course, most of them are irrelevant to the semantics we want, but they are necessary to efficiently process the code.
/*****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.

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.

Summarize

These tips can help me better to write CSS code. But that doesn't mean the end of the list, and then I'm going to bring something else to share with you.

What better tips do you have to help us refine our CSS code?