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>

Solution

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