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

When should you add classes to elements and style them using class selectors and when should you instead add a class/id on the parent and use the elements just as is?

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

Example:

<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 {}

vs.

<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 {}

Or should you do

或者你应该这样做

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

6 个解决方案

#1

Ask yourself this simple question:

问自己这个简单的问题:

Do all <x> elements under this common ancestor mean the same thing?

这个共同祖先下的所有元素是否意味着同样的事情?

If the answer to that is yes, then you don't need a class name on those elements. Taking your code as an example, the following is sufficient:

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

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

Because inside of a .warning-dialog, all h3 elements (1) and all p elements (1) would mean the same, the title and the content of the dialog! Meaning, you don't need to have any specific class names on them and they are easily accessible via .warning-dialog h3 or .warning-dialog p.

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

If however, the answer to above question is "No", that's a whole different story:

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

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

You can't (easily) designate each div with a CSS, they don't all mean the same thing, so you need to use class names to make it better!

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

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

#2

It depends on how flexible you want/ need your styling to be. Attaching CSS to parent tags means that all similar tags under the parent will have the same styling. If some of them should/ could be different, you'll need a way to specifically set them.

这取决于你想要/需要你的造型的灵活性。将CSS附加到父标记意味着父标记下的所有类似标记将具有相同的样式。如果其中一些应该/可能不同,您将需要一种专门设置它们的方法。

<div class="foo">
    <div>stuff</div>
    <div>other stuff</div>
</div>

in this case, "stuff" and "other stuff" must have the same style (unless we start playing with nth-child and stuff).

在这种情况下,“东西”和“其他东西”必须具有相同的风格(除非我们开始玩nth-child和东西)。

#3

Technically for both examples you could do with out classes. It would really only be the parent container that would make a difference. For example....

从技术上讲,这两个例子都可以用于课程。它实际上只是父容器会产生影响。例如....

If you were going to have multiple error containers on one page you could do something like this.

如果你要在一个页面上有多个错误容器,你可以做这样的事情。

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

.warning-dialog {
/*css for container*/
}

.warning-dialog h3 {
/*css for all h3 tags in that container*/
}

.warning-dialog p {
/*css for all p tags in that container */
}

If you were only going to use that container once on the page you could do this.

如果您只想在页面上使用该容器一次,则可以执行此操作。

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

    #warning-dialog {
    /*css for container*/
    }

    #warning-dialog h3 {
    /*css for all h3 tags in that container*/
    }

    #warning-dialog p {
    /*css for all p tags in that container */
    }

And if you were going to use the same container but style the header tag differently in one of your containers you would then probably want to use a class on the p tag.. for example...

如果你打算使用相同的容器,但在你的一个容器中对header标签进行不同的样式,你可能会想要在p标签上使用一个类......例如......

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

    .warning-dialog {
    /*css for container*/
    }

    .warning-dialog h3 {
    /*css for all h3 tags in that container*/
    }

    .warning-dialog p {
    /*css for all p tags in that container */
    }

    .warning-dialog .option2 {
    /*css for option 2*/
    }

However this may not always be the most practical approach because you will have conflicting CSS between these...And would have to use !important.

然而,这可能并不总是最实用的方法,因为这些之间会有相互矛盾的CSS ......并且必须使用!important。

.warning-dialog p {
    /*css for all p tags in that container */
    }

    .warning-dialog .option2 {
    /*css for option 2*/
    }

So instead it would probably still be best to have different ID's for the parent element. IE(errormsg1 and errormsg2) ...

因此,对于父元素,可能仍然最好具有不同的ID。 IE(errormsg1和errormsg2)......

But really it all depends on the context of your project.

但实际上这完全取决于项目的背景。

#4

The base concept is, that

基本概念就是这样

Unique Element to be styled, use id

要设置样式的唯一元素,请使用id

Collection of similar elements to be styled, use class.

要设置类似元素的集合,使用类。

#5

It's mainly a matter of personal preferences. I prefer to keep my HTML as clean as possible so I will prefer this

这主要取决于个人喜好。我更喜欢让我的HTML尽可能干净,所以我更喜欢这个

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

Also, if an element needs to be accessed by JavaScript, it's easier / faster to use an id instead of a class, but you have to make sure that you'll use that element only once in your page.

此外,如果需要通过JavaScript访问元素,则使用id而不是类更容易/更快,但您必须确保在页面中仅使用该元素一次。

#6

  It depends on your taste and personal preference; however, as some have pointed out, if all the children tags (of a particular type e.g. div) need the same style, you don't need to create a class for them; just use the tag names. If some require the same style, and others do not, apply classes to the ones that require (or don't require) it, and style accordingly.
  If you feel that the content might change in the near future, and the new content will require different styling, you can add classes to the new tags as they are being created.
   The point is that there's no defined standard way of doing it, and all everyone can tell you is what works for them.

这取决于您的口味和个人喜好;但是,正如一些人所指出的那样,如果所有子标签(特定类型的div)都需要相同的样式,则不需要为它们创建类;只需使用标签名称。如果某些类型需要相同的样式,而其他类型则不需要,请将类应用于需要(或不需要)的类,并相应地设置样式。如果您认为内容可能在不久的将来发生变化,并且新内容需要不同的样式,则可以在创建新标记时将其添加到新标记中。关键在于没有明确的标准方法,并且所有人都可以告诉你对他们有用的东西。

#1