避免为html设置全局类 [英] Avoid setting a global class for html
问题描述
我想使用 Fuel UX 。我复制其示例到我自己的网页，发现无法加载css。在比较我的HTML和示例HTML之后，我发现示例HTML设置了一个全局类：
I am trying to use Fuel UX. I copied its example to my own web page and found that the css could not be loaded. After comparing my HTML with the sample HTML, I find that the sample HTML sets a global class:
<html lang="en" class="fuelux">
将此行添加到我的HTML头解决了Fuel UX的问题。但是，添加此全局设置会在我的页面上混合许多其他元素。如何设置 class =fuelux 本地？
Adding this line to the head of my HTML solves the problem with the Fuel UX. However adding this global setting mixes many other elements on my page. How can I set this class="fuelux" locally?
EDIT：根据我的理解 class =fuelux打开一个命名空间，现在所有名称都在 .fuelux 是在全局命名空间下。有没有办法避免打开这个 fuelux 命名空间？
As I understand class="fuelux" opens a namespace, and now all names under .fuelux is under the global namespace. Is there a way to avoid opening this fuelux namespace?
非常感谢！
这是Fuel UX中的一个树容器的html：
Here is the html of a tree container in Fuel UX:
<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>
推荐答案
使用 < html class =fuelux> ？它是样式表的设计方式。我从其样式表中选择了一个代码段。
What's the problem in using <html class="fuelux">? It is how the stylesheet is designed. I've picked up a snippet from their stylesheet. If you mark something here...
.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> 标记上声明，才能使其正常工作。
It selects the element which are nested under element having class of fuelux so you need to declare that on the <html> tag in order to get it work.
此外， html 标记不被视为页面的头部。在 html 标签上声明一个类是完全正常的。它只是选择嵌套在 fuelux 类中的元素。如果你仍然想要摆脱那个类，比你可以使用它没有声明任何元素，但你必须调整你的样式表。您需要在CSS规则中的其他嵌套类之前删除所有 .fuelux 类。
Also, html tag isn't considered as the head of the page. It is completely normal and accepted to declare a class on the html tag. It just selects the elements which are nested inside the fuelux class. If you still want to get rid of that class, than you can use it without declaring on any element, but you will have to tweak your stylesheet. You need to remove all the .fuelux classes before the other nested class in your CSS rules.
使用它，以便它不会与您的其他类冲突。
They are just using it so that it doesn't conflict with your other classes.
根据您的评论， ，假设你使用 fuelux ，在 fuelux 中有一个类 .button ，他们使用红色的类。现在，假设容器 div 是您的 html 元素，它将使用此规则选择内部嵌套元素。
As per your comment, am throwing a demonstration here, suppose you are using fuelux, and in fuelux there's a class called .button and they are using color red for that class. So now, assume that the container div is your html element, it will select the inner nested element using this rule.
.fuelux .button {
color: red;
}
现在假设您已从 html 标记，看看会发生什么...
Now lets assume that you removed the class from the html tag so see what happens ...
它不会应用样式。为什么？因为 .fuelux 下没有嵌套的元素，具有 .button 的类。是的，你有 .button ，但它没有任何父元素类 .fuelux ，所以它失败。
It won't apply the styles. Why? Because there's no nested element under .fuelux having a class of .button. Yes, you do have .button but it doesn't have any parent element with class .fuelux so it fails.
最后但并非最不重要，冲突演示。假设你有一个名为 .button 的类，并且甚至 fuelux stylesheet有一个类 .button ，并且说你没有使用 class =fuelux，而忽略了 规则，它将使用您的。
Last but not the least, conflict demo. Assume that you have a class called .button already, and say even fuelux stylesheet has a class called .button and say you didn't used class="fuelux", than it will simply ignore the fuelux rule and it will use yours.
这篇关于避免为html设置全局类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
