避免为 html 设置全局类答案

【问题标题】：Avoid setting a global class for html避免为 html 设置全局类
【发布时间】：2013-07-28 12:58:25
【问题描述】：

我正在尝试使用Fuel UX。我把它的例子复制到我自己的网页上，发现无法加载css。在将我的 HTML 与示例 HTML 进行比较后，我发现示例 HTML 设置了一个全局类：

<html lang="en" class="fuelux">

将这一行添加到我的 HTML 的头部可以解决 Fuel UX 的问题。但是，添加此全局设置会在我的页面上混合许多其他元素。我该如何设置这个class="fuelux"本地？

编辑：据我了解，class="fuelux" 打开了一个命名空间，现在.fuelux 下的所有名称都在全局命名空间下。有没有办法避免打开这个fuelux 命名空间？

非常感谢！

这是 Fuel UX 中树容器的 html：

<div class="well tree-example">

  <div id="MyTree" class="tree">
    <div class="tree-folder" style="display:none;">
      <div class="tree-folder-header">
        <i class="icon-folder-close"></i>

        <div class="tree-folder-name"></div>
      </div>
      <div class="tree-folder-content"></div>
      <div class="tree-loader" style="display:none">
      </div>
    </div>
    <div class="tree-item tree-folder-content" style="display:none;">
      <i class="tree-dot"></i>

      <div class="tree-item-name"></div>
    </div>
  </div>

</div>

【问题讨论】：

如何在本地设置这个 class="fuelux"？ 是什么意思？
如我所说，如果我删除 class="fuelux"，我的 css 将无法加载。所以我需要将它设置在某个地方，而不是在我的页面顶部。
您的附加 CSS 文件应该可以在 HTML 不包含类的情况下工作。我相信 Fuel UX CSS 文件正在从您的其他 CSS 文件中覆盖 CSS 属性。正如你所说，一旦你从html 标签中删除fuelux 类，Fuel UX 就不会应用任何样式。只需确保以正确的顺序正确使用样式表即可。

标签： html css fuelux

【解决方案1】：

使用<html class="fuelux">有什么问题？这就是样式表的设计方式。我收到了一个 sn-p from their stylesheet。如果您在此处标记某些内容...

.fuelux .clearfix {
  *zoom: 1;
}

.fuelux .clearfix:before,
.fuelux .clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.fuelux .clearfix:after {
  clear: both;
}

.fuelux .hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.fuelux .input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fuelux article,
.fuelux aside,
.fuelux details,
.fuelux figcaption,
.fuelux figure,
.fuelux footer,
.fuelux header,
.fuelux hgroup,
.fuelux nav,
.fuelux section {
  display: block;
}

.fuelux audio,
.fuelux canvas,
.fuelux video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.fuelux audio:not([controls]) {
  display: none;
}

它选择嵌套在具有fuelux 类的元素下的元素，因此您需要在<html> 标记上声明它才能使其工作。

另外，html 标签不被视为页面的头部。在html 标签上声明一个类是完全正常的并且被接受。它只选择嵌套在fuelux 类中的元素。如果您仍然想摆脱该类，则可以在不声明任何元素的情况下使用它，但是您必须调整样式表。您需要在 CSS 规则中的其他嵌套类之前删除所有 .fuelux 类。

他们只是在使用它，以便它不会与您的其他课程冲突。

根据您的评论，我在这里进行演示，假设您使用的是fuelux，并且在fuelux 中有一个名为.button 的类，他们使用红色作为该类。所以现在，假设容器div 是您的html 元素，它将使用此规则选择内部嵌套元素。

.fuelux .button {
    color: red;
}

Demo

现在假设您从 html 标记中删除了该类，看看会发生什么...

Demo 2

它不会应用样式。为什么？因为.fuelux 下没有嵌套元素，其类为.button。是的，你确实有 .button，但它没有任何类 .fuelux 的父元素，所以它失败了。

最后但并非最不重要的，冲突演示。假设您已经有一个名为.button 的类，并且说即使fuelux 样式表也有一个名为.button 的类，并说您没有使用class="fuelux"，那么它将简单地忽略fuelux 规则，它会用你的。

Conflict Demo

【讨论】：

假设我有另一个具有 .abc 的 css 样式文件。显然，如果我在全局命名空间中引入fuelux，这两个命名空间就有可能相互冲突。（对不起，我是 Web 开发新手，术语来自 C++/Java。）
@JohnSket 我用例子解释了
谢谢！我得到了它。我没有放置<html lang="en" class="fuelux">，而是在我的fuelux 部分周围引入了一个新的包装器div。
@JohnSket 是的，但可以肯定的是，在父元素之外，样式将不适用 :) 欢迎

【解决方案2】：

如果您说您希望将类 fuelux 存储在某个地方，那么您将不需要它一次又一次地编写它，那么这是不可能的。

一种方法是创建一个简单的脚本，然后编写一个程序将class=fuelx 添加到每个页面的开头。通过将标题放在单独的文件中，然后包含它，然后在该页面上运行脚本，可以更轻松地完成此操作。更简单，现在如果您的标头位于单独的文件中，则不需要脚本，因为标头将包含在每个文件中，然后只需编写一次 class=fuelx。

或者你可以从它的样式表中删除 .fuelux 类，这样样式表就不会查找任何 .fuelux 类，并且样式将应用于首先是 @987654326 的子元素的所有元素@。

【讨论】：