Avoid setting a global class for 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">

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: 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?

Thanks a lot!

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>

回答1:

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

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.

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.

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

Demo

Now lets assume that you removed the class from the html tag so see what happens ...

Demo 2

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.

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.

Conflict Demo

回答2:

If you are saying that you want the class fuelux to be stored somewhere and so then you will not need it to write it again and again then it's not possible.

One approach could be to create a simple script and then write a program to add class=fuelx to head of every page. It could be done more easily by putting your header in a seprate file and then including it and then run script on that page. More easy, now if your header is in a seprate file you don't need a script beacuse the header will be inluded in every file and then just write class=fuelx only once.

Or you can just remove .fuelux class from it's stylesheet than that way the stylesheet would not look for any .fuelux class and the style will be applied to all the elements that were first the sub-elements of the .fuelux.

来源：https://stackoverflow.com/questions/17908447/avoid-setting-a-global-class-for-html

标签

html

css

fuelux