何时使用CSS类,何时不使用？

Question

什么时候应该向元素添加类并使用类选择器对它们进行样式化,何时应该在父类上添加类/ id并按原样使用元素？

例:

<div class="warning-dialog">
    <h3>This is the title</h3>
    <p>This is the message</p>
</div>

.warning-dialog {}
.warning-dialog h3 {}
.warning-dialog p {}

与

<div class="warning-dialog">
    <h3 class="warning-title">This is the title</h3>
    <p class="warning-message">This is the message</p>
</div>

.warning-dialog {}
.warning-title {}
.warning-message {}

或者你应该这样做

.warning-dialog .warning-dialog {}
.warning-dialog .warning-title {}
.warning-dialog .warning-message {}

Answer 1

问自己这个简单的问题:

<x>这个共同祖先下的所有元素是否意味着相同的东西？

如果答案是肯定的,那么你就不需要这些元素的类名.以您的代码为例,以下内容就足够了:

<div class="warning-dialog">
    <h3>This is the title</h3>
    <p>This is the message</p>
</div>

因为在a之内.warning-dialog,所有h3元素(1)和所有p元素(1)都意味着相同,对话框的标题和内容!这意味着,您不需要在其上具有任何特定的类名,并且可以通过.warning-dialog h3或轻松访问它们.warning-dialog p.

但是,如果上述问题的答案是"否",那就完全不同了:

<div>Warning</div>
<div>Info</div>
<div>Error</div>

你不能(轻松地)用CSS指定每个div,它们并不都意味着相同的东西,所以你需要使用类名来使它更好!

<div class="warning-dialog">Warning</div>
<div class="info-dialog">Info</div>
<div class="error-dialog">Error</div>