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 –
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:
Modernizr assigns capability classes to the
html tag, as does Grunticon. In addition, I assign IE-specific classes (
oldie) to the
Page Classes –
Page Classes are for applying specific styles to a particular page. These are classes such as:
viewing-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 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
body classes are special; they really only make sense on the actual
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
body tags? Same approach or different?
Feel free to share in the comments below.