Some suggestions on CSS writing specifications

Avoid excessive constraints

As a general rule, do not add unnecessary constraints.

CSS code copy content to clipboard

Bad

Ul#someid {..}

. menu#otherid{.}

Good

#someid {..}

#otherid {..}

The descendant selector sucks.

Not only is the performance low and the code is very fragile, HTML code and CSS code is seriously coupled, the HTML code structure changes, CSS also have to modify, this is how bad, especially in large companies, writing HTML and CSS is often not the same person.

CSS code copy content to clipboard

It sucks.

HTML DIV tr td {.}

Use composite syntax whenever possible

CSS code copy content to clipboard

Bad

. SomeClass {

padding-top:20px;

padding-bottom:20px;

padding-left:10px;

padding-right:10px;

Background: #000;

Background-image:url (.. /imgs/carrot.png);

Background-position:bottombottom;

Background-repeat:repeat-x;

}

Good

. SomeClass {

padding:20px 10px 20px 10px;

Background: #000 URL (.. /imgs/carrot.png) Repeat-x Bottombottom;

}

Avoid unnecessary duplication

CSS code copy content to clipboard

Bad

. SomeClass {

color:red;

Background:blue;

font-size:15px;

}

. otherclass {

color:red;

Background:blue;

font-size:15px;

}

Good

. SomeClass,. Otherclass {

color:red;

Background:blue;

font-size:15px;

}

Well organized code format

The readability and maintainability of the code is proportional to the ease of maintenance. Here are the formatting methods I followed.

CSS code copy content to clipboard

Bad

Someclass-a,. Someclass-b,. Someclass-c,. someclass-d {

...

}

Good

. Someclass-a,

. Someclass-b,

. Someclass-c,

. someclass-d {

...

}

Good practice.

. SomeClass {

Background-image:

Linear-gradient (#000, #ccc),

Linear-gradient (#ccc, #ddd);

Box-shadow:

2px 2px 2px #000,

1px 4px 1px 1px #ddd inset;

}