There was a recent post on CSS-Tricks about HTML vs Body in CSS which was interesting. It made me think about classes that I typically assign to the html tag vs the body tag and I wanted to take the opportunity to codify my process.
In a nutshell, the html tag is for classes that apply to the browser, while the body tag is for classes that apply to the page.
Browser Classes – html
Browser Classes are classes that will be true for any given browser across every page on a site (mostly). They are primarily based on browser capabilities and include things such as:
jsvsno-jstouchvsno-touchcssanimationsvsno-cssanimations
Modernizr assigns capability classes to the html tag, as does Grunticon. In addition, I assign IE-specific classes (ie9, ie8, oldie) to the html tag.
Page Classes – body
Page Classes are for applying specific styles to a particular page. These are classes such as:
homepageproducts-sectionviewing-slide-9– for maintaining state
With these classes, it doesn’t matter what the browser is, they should be the same for any browser (except for the possibility of JS disabled) on a given page at a given state.
Advantages of this Approach
This approach is nice in Sass because you can work your way out on styling exceptions. For example, look at this (contrived) Sassmeister embed.
Play with this gist on SassMeister.
We can setup some standard behavior for a particular component. Then easily change the behavior on a particular page (with the body class). During cross browser testing, we can then add an html class for browsers that don’t support the 3d CSS transforms (using a feature detect rather than a browser detect as much as possible). This is deeper than I usually nest Sass but I make an exception for such obvious overrides as html and body classes.
HTML Tags on a Selector?
These are a couple of the very few times that I put an HTML tag in the selector.
Usually, I avoid the HTML tag so that you can easily re-use a particular CSS component in other ways but the html and body classes are special; they really only make sense on the actual html and body tags. Also, I want to provide a clear indication to other developers where these are used so that there is confusion. The browser and page classes aren’t used just anywhere, they have very specific purpose.
Another purpose is that sometimes the HTML tag provides that little bit of specificity you need to make a particular style win out and be applied where a case alone might not.
How About You?
Do you use classes on your html or body tags? Same approach or different?
Feel free to share in the comments below.