html - CSS 命名约定 - 嵌套 CSS

Question

这是一个示例:http://jsfiddle.net/spadez/PduBG/7/

我的问题是从 CSS 的 Angular 来看，这样做是否错误:

.header {
    background-color: pink;
    padding: 20px
}
.header ul {
    float: right;
}
.header ul li {
    display: inline;
    padding: 10px;
}

相反，这样的事情会更好吗:

.header {
    background-color: pink;
    padding: 20px
}
#header_list {
    float: right;
}
#header_listitem {
    display: inline;
    padding: 10px;
}

Answer 1

这里没有真正的正确或错误。

从技术上讲，第二个选项渲染速度更快，因为浏览器只需要扫描 ID，而不是检查元素的嵌套，但实际上，除非您有一个巨大的文档，否则它不会被注意到。

要确定最佳方法，您需要检查语义:

您想设置标题中所有列表项的样式吗？选择第一种方法

您想设计该特定元素的样式吗？选择第二种方法