元素中的多个类是一个好的（或最好的）练习吗？

Question

在单个元素中有多个类是一个好习惯吗？像这样：

<div class ="panel panel-primary panel-hide text-center">

或者这样做更好：

<div class ="panel">
    <div class="panel-primary">
        <div class="panel-hide">
            <div class="text-center">
             <!-- content here -->

或者将每个div的类限制为2或3更好吗？

或者甚至重要吗？

Answer 1

您是否从Bootstrap网站获得了一些这些类和一些代码？

有时类需要在单独的嵌套div上，因为它们使用：before和：after或margin，padding或定位div。当您将所有类粘贴到一个div中时，这可能不起作用，并且类可能会相互覆盖。

Answer 2

取决于项目，您要完成的任务以及您正在使用的已有助手。

如果您正在使用Twitter Bootstrap之类的东西，请使用您所提供的内容以最少的代码完成您所需的内容。

如果您正在使用自定义类构建某些内容，请坚持使用一种模式并完成。你想要意识到你为什么要添加一个类，否则你可能会在以后遇到特殊问题，并且只需要在顶部添加更多内容来确定一个特定的元素。

如果添加一个类将保存10行重复的代码，当你用相同的项重复相同的样式时，绝对要去做。但是，我想尝试尽可能简化课程。

一个非常简单的例子：

：此

<div class="one">
   <p>
       <h1>Hi there!</h1>
   </p>
</div>

.one {
    /* css here */
}

.one > p {
    /* more css here */
}

.one > p > h1 {
    /* even more css here */
}

可以安装所有这些

<div class="one">
   <p class="one-p">
       <h1 class="one-header">Hi there!</h1>
   </p>
</div>

.one {
    /* css here */
}

.one .one-p {
    /* more css here */
}

.one .one-p .one-header {
    /* even more css here */
}