Principles of efficient and clean CSS code (Part 1)

CSS is not difficult to learn, but in large projects, it becomes difficult to manage. Especially when different people have slightly different CSS writing styles, it becomes more difficult to communicate in the team. To this end, we have summarized some ways to achieve efficiency and cleanliness. CSS code principles:

1. Use Reset but not a global Reset

The default attributes of different browser elements are different. Use Reset to reset some default attributes of browser elements to achieve browser compatibility. But it should be noted that please do not use global Reset:

*{margin:0;padding:0; }

This is not only because it is a slow and inefficient method, but also leads to some unnecessary elements. Reset margins and padding. It is recommended to refer to the practices of YUI Reset and Eric Meyer.

/**Clear inner and outer margins **/

body, h1, h2, h3, h4, h5, h6, hr, p,

blockquote,/* structural elements structural elements*/

dl, dt, dd, ul, ol, li,/* list elements list elements*/

pre,/* text formatting elements text formatting elements*/

form, fieldset, legend, button, input, textarea,/* form elements form elements */

th, td,/* table elements table elements*/

img/* img elements picture elements*/{

border:mediumnone;

margin:0;

padding:0;

}

/**Set default font **/

body,button, input, select, textarea {

font:12px/1.5'宋体',tahoma, Srial,helvetica,sans-serif; }

h1, h2, h3 , h4, h5, h6{font-size:100%; }

em{font-style:normal;}

/**Reset list elements **/

ul, ol {list-style:none; }

/**Reset hyperlink element **/

a {text-decoration:none;color:#333;}

a:hover {text-decoration:underline;color:#F40; }

/**Reset image elements **/

img{border:0px;}

/**Reset table elements **/

table {border-collapse:collapse;border-spacing:0; }

2. Good naming Habit

No doubt messy or unsemantically named code will drive anyone crazy. Like this code:

.aaabb{margin:2px;color:red;}

I think even a beginner would not name a class like this in an actual project, but have you ever thought about such a code? It is also very problematic:

My name is Wiky

The problem is that if you need to change all the original red fonts to blue, then modify Then the style will become:

.red{color:bule;}

Such a name will be very confusing. If the sidebar named .leftBar needs to be modified to the right sidebar, it will also be very confusing. trouble. Therefore, please do not use the characteristics of the element (color, position, size, etc.) to name a class or id. You can choose meaningful names such as: #navigation{…}, .sidebar{…}, .postwrap{…}

In this way, no matter how you modify the styles that define these classes or ids, the connection between them and HTML elements will not be affected.

There is another situation. Some fixed styles will not be modified after they are defined. Then you don’t have to worry about the situation just mentioned when naming, such as

.alignleft{float:left;margin- right:20px;}

.alignright{float:right;text-align:right;margin-left:20px;}

.clear{clear:both;text-indent:-9999px;}

So for such a paragraph

I am a paragraph!

If you need to change this paragraph from the original left alignment to right alignment, then you only need to modify its className to alignright.

3. Code abbreviation

CSS code abbreviation can improve the speed of writing code and streamline the amount of code. There are many properties that can be abbreviated in CSS, including margin, padding, border, font, background and color values. If you learn the code abbreviation, the original code is like this:

li{

font-family: Arial,Helvetica,sans-serif;

font-size:1.2em;

line-height:1.4em;

padding-top:5px;

padding-bottom:10px;

padding-left:5px;

}

can be abbreviated as:

li{

font:1.2em/1.4emArial,Helvetica,sans-serif;

padding:5px010px5px;

}

4. Use CSS inheritance

If multiple child elements of the parent element on the page use the same style, it is best to define their same styles on their parent elements and let them inherit these CSS styles. This way you can maintain your code well and reduce the amount of code. So the original code is like this:

#container li{font-family:Georgia,serif; }

#container p{font-family:Georgia,serif; }

#container h1{font-family:Georgia, serif; }

can be abbreviated as:

#container{font-family:Georgia,serif; }

5. Using multiple selectors

You can merge multiple CSS selectors into one, if They have words in common. Doing so not only keeps the code concise but also saves you time and space. Such as:

h1{font-family:Arial,Helvetica,sans-serif;font-weight:normal; }

h2{font-family:Arial,Helvetica,sans-serif;font-weight:normal; }

h3{font -family:Arial,Helvetica,sans-serif;font-weight:normal; }

can be combined into:

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font- weight:normal; }

The above is the content of the principles of efficient and clean CSS code (Part 1). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!