Question

考虑可以在页面上多次使用的可重用组件/窗口小部件。它有这样的HTML：

<div class='component-banner'>
    <div class='component-heading'>
        <p>My Widget</p>
    </div>
    <div class='component-body'>
        <p>Blah blah</p>
    </div>
</div>

它可以拥有像：

这样的CSS

.component-heading p { ... }
.component-body p { ... {

或喜欢：

.component-banner .component-heading p { ... }
.component-banner .component-body p { ... }

那么，应该如何编写CSS？我主要想知道可读性和可维护性，但可能还有其他因素我没想过。

Answer 1

Declare the css rules in the most specific ways as needed

如果你有两个（或更多）冲突的CSS规则指向同一个元素，那么浏览器会跟随some basic rules确定哪一个最具体，因此胜出。

组的实际specificity 嵌套选择器需要一些计算。基本上，你给每个人 id选择器（“#whatever”）的值为 100，每个类选择器（“.whatever”）值10和每个 HTML选择器（“无论什么”）的值 1.然后你添加它们你具有特异性值。

这样：

.component-banner .component-heading p { color:green }
.component-heading p { color:red }
 p { color:blue }

无论顺序如何，.component-banner .component-heading p都会绿色。

 #test p {color:orange}
 body div p { color:green }
 div p { color:red }
 p { color:blue }

#test p变为橙色，无论顺序如何。

Answer 2

关于特异性的答案是正确的。这种故意缺乏特异性是一种称为面向对象的CSS（oocss）的方法的一部分，它鼓励在ID选择器上使用类选择器，并以更模块化的方式构建，在同一HTML元素上大量使用多个类，并重用类。还鼓励最小化！important的使用（它打破了级联并降低了可维护性）并将多余的HTML元素排除在外（你已经在某种程度上做了，即使用.component-heading而不是div.component-heading）。 / p>

尽可能采用这种方法可以通过降低对具有多个ID或类的真正长选择器的需求来极大地简化CSS。

Object Oriented CSS

Answer 3

这是一个很好的问题。由于.component-browser位于可重用组件的根目录，因此我认为有足够的上下文来确保规则仅适用于该组件。

Answer 4

这实际上取决于您的规格和要求，例如。您正在编写的Web应用程序是否可以长期维护，模块化，因此可以轻松地与构成整体框架的其他组件集成。在这种情况下，采用名称空间概念，为您自己的模块提供所有CSS，JS相关代码，以一种不与任何未来或用户代码冲突的方式是我的建议。

Answer 5

您是否考虑过选择器的渲染时间？ ID效率最高，*最低。

http://css-tricks.com/efficiently-rendering-css/

正如你所说的那样，“你没有想到的其他因素”。

CSS选择器应该有多少嵌套？

5 个答案: