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

What are the suggestions for CSS to write a specification? for this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

Avoid excessive constraints

As a general rule, no unnecessary constraints are added.

CSS Code copies content to the clipboard

/ / Bad ul#someid {..} .menu # otherid {..} / / good # someid {..} # otherid {..}

The descendant selector is the worst.

Not only is the performance poor but the code is fragile, html code and css code are heavily coupled, and CSS has to be modified when the structure of html code changes, especially in large companies, where html and css are often written by different people.

CSS Code copies content to the clipboard

/ / it sucks html div tr td {.}

Use compound syntax whenever possible

CSS Code copies content to the clipboard

/ / too 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;} / / OK .someclass {padding: 20px 10px 20px 10px; background: # 000 url (.. / imgs/carrot.png) repeat-x bottombottom;}

Avoid unnecessary repetition

CSS Code copies content to the 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;} the readability of the organized code format is proportional to its maintainability. The following is the formatting method I follow. CSS Code copies content to the 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 # 000000, 1px 4px 1px 1px # ddd inset;} suggestions on CSS writing specifications have been shared here, I hope the above content can be of some help to you, if you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

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.