Five methods: write better CSS code immediately

ArticleDirectory

• 1. Reset
• 2. Sorting
• 3. Organization
• 4. Consistency
• 5. Start from the correct place
• Summary

Of course, everyone can write CSS.CodeYou have even made it work for your project. But can CSS be better? Use these five tips to improve your CSS!

1. Reset

First of all, tell you very seriously,Always reset some categories. Whether you use Eric Meyer reset, Yui reset, or reset code you have compiled, you only need to use it.

It can easily remove the padding and 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 both very powerful, but they are too far away for me. I think you need to reset everything and then redefine the attributes of all elements. This is why Eric Meyer recommends more effective use (resetting style sheets), instead of simply using his reset style sheet and dragging it to your project. Adjust it (reset style sheet) to create your own reset style sheet.

Oh, please stop using:

* {Margin: 0; padding: 0 ;}

It takes more time to make it. When you remove the padding, what do you think will happen to the radio button? Form elements can sometimes do something fashionable, so the most effective way is to separate them.

2. Sorting

A small test
This example is to let you think about how to get faster.Locate the right margin Property?

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 cannot tell me that example #2 cannot locate the right margin attribute more quickly. Sort your element attributes by letter. Consistent creation of your CSS will help you save time in searching for a special attribute.

I know that some people use this method to organize code, while others use another method to organize code. But in my company, we make a consensus decision, all codes are organized alphabetically. It is helpful to organize code to work with others in this way. When I encounter a Cascading Style Sheet with properties not sorted alphabetically, I will retreat every time.

3. Organization

You should organize your style sheets so that the relevant content can be tied together to make it easier to find what you want. Use more effective annotations. For example, how do I construct my Cascading Style Sheets:

/***** Reset *****/
Removes the padding and margin of an element ).
/***** Basic elements *****/
Defines the style of basic elements: body, h1-h6, UL, ol, A, P, etc.
/***** Generic classes *****/
Define a simple style, like a floating side, and remove the bottom margin of elements. Of course, most of them are irrelevant to the semantics we want, however, they are required for efficient code processing.
/***** Basic layout *****/
Defines basic templates such as header and footer to help define basic elements of web page layout.
/***** Header *****/
Define all hearder Elements
/***** Content *****/
Define elements in all content boxes
/***** Footer *****/
Define all footer Elements
/***** Etc *****/
Define other selectors. By grouping annotation and classification similar elements, you can quickly find what you want.

4. Consistency

No matter how you decide to write the code, make sure it is consistent. I have been bored and tired of the debate over how to write CSS in one row vs. multiple rows. This does not need to be argued. Everyone has their own opinions, so select a method you like and keep them consistent in all style sheets.

Personally, I will use a combination of the two. If a selector has more than three attributes, I will cut it off and write it in multiple rows.


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 work method you like and keep it consistent.

5. Start from the correct place

Do not try to approach your style sheet before you complete the markup language.

When I want to split a Web page, before creating a CSS file, I need to preview and mark all the documents between closed tags of the body when the body is opened. I will not add additional Div, ID, or class selector. I will add some general Divs, such as hearder, content, and footer, Because I know these things actually exist.

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

The CSS sub-selector is used to specify the stator element. Do not add a class or ID selector to the element mechanically. Remember:No well-formatted document (or tag structure) CSS is worthless.

Summary

These tips can help me better write CSS code. However, this does not mean that this list is over. Next I will share some other information with you.

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