Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to write CSS style to become more standardized", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to write CSS style to become more standardized" bar!

1. Arrange css alphabetically

Not arranged in alphabetical order:

The code is as follows:

Div#header h2 {

Z-index: 101

Color: # 000th:

Position: relative

Line-height: 24px

Margin-right: 48px

Border-bottom: 1px solid # dedede

Font-size: 18px

}

Arranged in alphabetical order:

The code is as follows:

Div#header h2 {

Border-bottom: 1px solid # dedede

Color: # 000

Font-size: 18px

Line-height: 24px

Margin-right: 48px

Position: relative

Z-index: 101

}

The reason is this: you can better find an attribute.

two。 Better organizational css structure

Use css annotations to group css so that the structure is clear and collaborative design is beneficial.

/ * Reset*/

Xxxxxxx {www.sytm.net}

Xxxxx {xxxxx}

/ * layouts*/

Xxxxxxx {www.sytm.net}

Xxxxx {xxxxx}

3. Maintain consistency

Don't talk meaninglessly about whether all the attributes of a selector are written on one line or whether it is better to write one line for each attribute. If you like to write on one line, because writing one line in each row will make the whole document feel too long to find. But another person who sent it to team, he likes to line up each sentence, so what should I do? In fact, it is very simple, take the css to W3C verification, it will have a result, will be automatically converted to each row.

4. Mark first and then css

It is less error-prone to write css after marking html. For example, to write a page, first write a basic tag structure

The code is as follows:

!

Then make the best use of sub-selectors instead of adding a selector to an element that you want to stylize.

5. CSS Reset/ reset

You can copy Eric Meyer Reset, YUI Reset or other css reset, but then you should change it to your own reset according to your project.

* {margin: 0; padding: 0;} this sentence does not apply to some elements such as radio buttons, but if there is a radio button, just reset the radio button.

Thank you for your reading, the above is the content of "how to write CSS style to become more standardized". After the study of this article, I believe you have a deeper understanding of how to write CSS style to become more standardized, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.