为一个 HTML 元素分配多个类有什么好处？答案

【问题标题】：What are the advantages of assigning multiple classes to an HTML element?为一个 HTML 元素分配多个类有什么好处？
【发布时间】：2015-05-07 03:46:37
【问题描述】：

为什么需要为 HTML 元素分配多个类而不是单个类。我指的是这样的代码。

<div class="navbar navbar-fixed-top">

【问题讨论】：

答案在这里解释：stackoverflow.com/questions/17366432/…
所以你可以有一个单独的形状类，另一个用于颜色和最后一个位置......
您可能有几个 div 想要充当导航栏，但您可能不希望所有这些 div 都固定在顶部。也许你想要一些固定在底部。拥有多个类可以帮助您重用 css 而不是复制它。

标签： html css

【解决方案1】：

想象一个场景，在每个 li 元素中都有一个带有字体图标的菜单，每个字体图标共享共同的 font-size、color 等等，所以在这种情况下我们会写

<ul>
    <li><span class="icon fb">Something here</span></li>
    <li><span class="icon twitter">Something here</span></li>
</ul>

.icon {
    font-size: 12px;
    color: black;
    display: inline-block;
    padding: 5px;
}

/* But content are unique so we define them separately */
.fb {
    content: "Facebook Icon";
}

.twitter {
    content: "Twitter Icon"
}

在这里，您必须始终定义基本属性，即在.icon 中，必须为您设置的每个图标定义它，因为每个图标通常共享。如果你想定义一个类而不是你需要做这样的事情......

.fb,
.twitter {
    content: "Facebook Icon";
    font-size: 12px;
    color: black;
    display: inline-block;
    padding: 5px;
}

/* Need to override because previous declaration was set for facebook */
.twitter {
    content: "Twitter Icon";
}

如您所见，覆盖开始出现，因此这取决于您尝试做什么，有时使用单个类很容易实现，但有时在单个元素上声明多个类更有意义，您也可以采取查看通常遵循多种类声明模式的 CSS 网格。

我分享的案例仅限于一个导航栏，我一般会创建类似这样的自清类

.clear:after {
    content: "";
    display: table;
    clear: both;
}

现在我在子元素浮动的每个元素上调用这个类

<nav class="navbar clear">
   <div class="floatedtoleft"></div>
   <div class="floatedtoright"></div>
</nav>

声明一个公共类比做类似的事情更有意义

使用单个声明在这里变得简单，而不是为样式表中的每个元素指定间隙

/* Bad Practice */
.elm1_holds_child_floats:after,
.someotherelm_child_floats:after,
nav:after,
section.some_otherelm:after {
    /* Clear floats for above elements here and this is shitty */
}

我希望这可以消除您的疑问，即为什么在某些情况下需要使用多个类，您不需要每次都声明多个类，这取决于您编写 CSS 的程度以及您想要它的紧凑程度成为。

【讨论】：