Question

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

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

Answer 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 Grids，它通常遵循多个类声明模式。

我分享的案例仅限于导航栏，我通常会创建像

这样的自我清算类

.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的程度以及你想要它的紧张程度是。

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

1 个答案: