我应该在CSS中使用两次相同的选择器吗？

Question

以下哪项是最佳（即更好）的做法？

#anElement {
    font-size:1em;
    color:white;
}

/* other stuff */

#anElement {
    width:100px;
    margin-bottom:10px;
}

或

#anElement {
    background-color:black;
    color:white;
    font-size:1em;
    margin-bottom:10px;
}

换句话说：我应该尽可能干燥 CSS，还是应该分别处理排版和总体布局，甚至可能在单独的文件中？

Answer 1

第一个选项是完全可以接受的，并且某些CSS minifiers会将它们全部组合成一个。我肯定会考虑使用minifier，因为第一个选项可以产生更多可读/可维护的代码，特别是如果分成多个文件。

Answer 2

拥有多个样式表会损害您的页面性能。如果您想以这种方式组织CSS，请考虑预处理器，例如http://sass-lang.com/。

Answer 3

合并它们但为属性提供逻辑分组。有几种方法可以将它们分组;你可以按字母顺序或逻辑顺序排序（文本属性在一起，边距填充等）。

见CSS Property Order，由Bootstrap的创造者Mark Otto撰写。

另外值得注意的是，在一个简单的样式示例中，您提供的问题应该问自己一个问题......是否有可能部分/全部代码可能会在页面上的其他位置重复使用？也许有几个div可以使用相同的样式。那么你应该使用一个不是id的类。