为一个 HTML 元素分配多个类有什么好处? [英] What are the advantages of assigning multiple classes to an HTML element?

问题描述

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

解决方案

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

<li><span class="icon fb">这里有一些东西</span></li><li><span class="icon twitter">这里有一些东西</span></li>
.图标 {字体大小:12px；颜色:黑色;显示:内联块；填充:5px；}/* 但是内容是唯一的所以我们单独定义它们 */.fb {内容:脸书图标"；}.推特 {内容:推特图标"}

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

.fb,.推特 {内容:脸书图标"；字体大小:12px；颜色:黑色;显示:内联块；填充:5px；}/* 需要覆盖，因为之前的声明是为 facebook 设置的 */.推特 {内容:推特图标"；}

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

我分享的案例仅限于导航栏，我通常创建自清除类

.clear:after {内容: "";显示:表；清楚:两者；}

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

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

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

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

/* 不好的做法 */.elm1_holds_child_floats:之后，.someotherelm_child_floats:之后，导航:之后，section.some_otherelm:后{/* 在这里清除上面元素的浮点数，这太糟糕了 */}

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

Why would an HTML element needed to be assigned multiple classes instead of a single class. I am referring to a code like this.

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

解决方案

Think of a scenario where you have a menu with font icons in each li element, each font icon shares common font-size, color and so on, so in that case we would write

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

Here, it's essential for you to always define base properties i.e in .icon which has to be defined for every icon you set as each icon shares commonly. If you wanted to define a single class than you need to do something like this...

.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";
}

As you see, overrides started coming in, so it depends on what you are trying to do, sometimes things are easily achievable with a single class but sometimes declaring multiple classes on a single element makes more sense, you can also take a look at CSS Grids which usually follow multiple class declaring patterns.

The case I shared is limited to a navigation bar, I usually create self clearing classes like

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

Now I call this class on every element where the child elements are floated

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

It makes much more sense to declare a common class instead of doing something like

Gets simple here with that single declaration instead of you specifying clearance for each and every element in your stylesheet

/* 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 */
}

I hope this clears your doubt that why you need to use multiple classes in some cases, you don't need to declare multiple classes every time, it depends on you that how well you write your CSS and how tight you want it to be.

这篇关于为一个 HTML 元素分配多个类有什么好处?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！