CSS编写规范的相关建议

避免过度约束

作为一般规则，不添加不必要的约束。

// 糟糕   

    ul#someid {..}   

    .menu#otherid{..}   

      

    // 好的   

    #someid {..}   

    #otherid {..}

后代选择符最烂

不仅性能低下而且代码很脆弱，html代码和css代码严重耦合，html代码结构发生变化时，CSS也得修改，这是多么糟糕，特别是在大公司里，写html和css的往往不是同一个人。

// 烂透了   

    html div tr td {..}

尽可能使用复合语法

// 糟糕   

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

    }   

      

    // 好的   

    .someclass {   

    padding: 20px 10px 20px 10px;   

    background: #000 url(../imgs/carrot.png) repeat-x bottombottom;   

    }

避免不必要的重复

// 糟糕   

    .someclass {   

    color: red;   

    background: blue;   

    font-size: 15px;   

    }   

      

    .otherclass {   

    color: red;   

    background: blue;   

    font-size: 15px;   

    }   

      

    // 好的   

    .someclass, .otherclass {   

    color: red;   

    background: blue;   

    font-size: 15px;   

    }

组织好的代码格式

代码的易读性和易维护性成正比。下面是我遵循的格式化方法。

// 糟糕   

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

    ...   

    }   

      

    // 好的   

    .someclass-a,   

    .someclass-b,   

    .someclass-c,   

    .someclass-d {   

    ...   

    }   

      

    // 好的做法   

    .someclass {   

        background-image:   

            linear-gradient(#000, #ccc),   

            linear-gradient(#ccc, #ddd);   

        box-shadow:   

            2px 2px 2px #000,   

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

    }