Five methods to quickly write better CSS

1. Reset

Photo by redux

True,Always use a resetWhether using Eric Meyer Reset or YUI
Reset, or your own custom reset, must be used.

This can simply remove the margin and padding attributes 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; }

The Resets style of Eric Meyer and YUI is great, but for me, they are too far away. I want you to clear everything and then redefine many attributes of the element. This is what Eric Meyer recommends. If there is a more effective way to use it, you should not just use it to his style file and put it directly in your own project-extract it and recreate it on the basis of it, turn it into your own.

Oh, please do not do this again:

* { margin: 0; padding: 0; }

It is used too much. If you remove the padding of a single queue, what do you think will happen? Sometimes, form elements are somewhat fashionable, so it is best to keep them as they are.

2. sort by letter

Photo by kvl

A small test

In the following two examples, which one do you think can be faster?Locate the location of the margin-right attribute?

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

Don't tell me Example 2. No Example 1 is quick! By sorting the attributes of these styles alphabetically, the consistency you create will help you reduce the time spent searching for a certain attribute.

I know that some people organize the order in this way, while others organize the order in another way. But in my company, we are all determined to sort by letter. This method is certainly useful to you when you develop code together with others. Every time I see a style sheet not sorted by letters, I hate it because it looks messy and unordered ......

3. Organized

Photo by allyaubryphotography

You should organize your style so that you can easily find the desired content and related entries. You can use the annotation method. For example, I organize my style sheets in this way:

/***** Reset *****/reset/****** basic elements *****/defines the style for the basic element: body, h1-h6, UL, OL, A, P, etc. /***** generic classes *****/define some separate styles, such as floating and removing the bottom margin of elements. Yes, maybe they are not semantic enough, but they are very effective for Effective encoding. /***** Basic layout *****/defines the basic template: Header, bottom, and so on, used to define the basic structure of a website/* Header */define all the elements in the header/* content */define the content area all the elements of/****** footer *****/the bottom style/****** etc *****/continue to define other styles

By using annotations and grouping similar elements, you can quickly find the content you need.

4. Consistency

Photo by sailor_coruscant

Whatever the encoding method you use, keep it. I hate disputes over full or full lines. There is nothing to argue about! Everyone has their own opinions, so use what you think is right and keep it up from start to end.

Personally, I use the hybrid mode. If a style has more than three attributes, I use multiple rows:

div#header { float: left; width: 100%; }div#header div.column {border-right: 1px solid #ccc;float: right;margin-right: 50px;padding: 10px;width: 300px;}div#header h1 { float: left; position: relative; width: 250px; }

I use this method because a line in my text editor can accommodate about three attributes before a line break. If there are not many attributes, it is obvious that a single row is easier to read than multiple rows.

5. Start from the correct place

Photo by odolphie

Do not touch your style file before you write your labels.

When I was about to start work, I checked and encoded the entire document (HTML) before creating a CSS file, from the start of the body tag to the end of the entire body tag. No extra Div, ID, or class is added. I will add some common Divs, such as the header, content, and bottom, Because I know these things will certainly be there.

By first coding the entire document, you can avoid multiple Div or multiple types of symptoms, which may sometimes be fatal! You only need to add them when you start to write CSS and determine what else is needed to achieve the relevant effect.

Use the back selector of CSS to define child elements. Do not automatically add a class or ID to the element. Remember,CSS is worthless if a document does not have a good format (structure.

* Edit Note: I cannot emphasize this point enough. As Trevor said, do not touch your CSS file before HTML is completed by 100%.

Conclusion

This is just some tips to help me write better code. Of course, this is not the end of this Article. When I find other tips, I will continue to share them.

Do you have any tips for better CSS writing? Share with us!

Http://net.tutsplus.com/
Original article: five methods to quickly write better CSS
Copyright. For more information, see the source. Thank you!