5 tips for Optimizing CSS code

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 CSSwill 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, before I create a CSS file, I need to preview and mark all the documents between the body and the Closed tab of the body. 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 doomed Divities ^{1 and Classitis 2 trouble!/*you only need to add in that stuff once your have begun to WR Ite the CSS and realize that you are going to need another hook to accomplish what for you are trying to achieve.*/(not translated in the original).}

Uses the CSS child selector to specify child elements; Do not simply add a class or ID selector to an element mechanically. Remember that does not have a well-formed document (or tag structure) CSS is worthless.

Summary

These tips can help me better write the 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.