编写可维护CSS的最佳实践是什么？

Question

我刚开始探索这个领域,并想知道在生成干净,结构良好和可维护的CSS时最好的做法是什么.

似乎很少有不同的方法来构建CSS规则.

我看到的最常见的一个是将所有内容放在一个规则中,即边距,边框,字体,背景,如下所示:

.my-class {
    border-top:1px solid #c9d7f1;
    font-size:1px;
    font-weight:normal;
    height:0;
    position:absolute;
    top:24px;
    width:100%;
}

我注意到的另一种方法是使用属性分组,比如文本相关的属性,比如字体大小,字体,强调等等,一个规则,背景进入其他,边框/边距进入另一个规则:

.my-class {
    border-top:1px solid #c9d7f1;
}

.my-class {
    font-size:1px;
    font-weight:normal;
}

.my-class {
    height:0;
    top:24px;
    width:100%;
    position:absolute;
}

我想我正在寻找一个银弹,我知道我不会得到,但是打赌 - 这个领域的最佳做法是什么？

Answer 1

就我个人而言，我使用第一种方法，但我也缩进子选择器。例如：

.my-class {
    /* stuff here */
}

    .my-class tr {
        /* stuff here */
    }

        .my-class tr a {
            /* stuff here */
        }

但不知道最佳实践，除了将左大括号与右大括号放在同一行，并以分号结束每个属性，即使它是最后一个。