Skip to content Skip to sidebar Skip to footer
Home / Css / Fuelux / Html

Avoid Setting A Global Class For Html

Post a Comment
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

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

.fueluxarticle,
.fueluxaside,
.fueluxdetails,
.fueluxfigcaption,
.fueluxfigure,
.fueluxfooter,
.fueluxheader,
.fueluxhgroup,
.fueluxnav,
.fueluxsection {
  display: block;
}

.fueluxaudio,
.fueluxcanvas,
.fueluxvideo {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.fueluxaudio: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

Solution 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.

Post a Comment for "Avoid Setting A Global Class For Html"