When writing CSS for a Drupal 7 theme, it’s easy to forget that core includes utility classes.
Yes, there’s a whole load of stuff that you might want to override, or get rid of altogether, and you might want to use a base theme, like Zen or Tao or Mothership, but it’s worth remembering that there is some useful stuff in core.
If you ignore core, you can end up writing more code and bloating your site just that little bit more than you have to.
It’s worth looking at system.base.css and system.theme.css to learn more about these classes.
- Prevent text wrapping.
- .nowrap
- Hide items on page load when JS is enabled, so that you can use the JS to control visibility and avoid flicker.
- .js-hide
- Hide elements from all users.
- .element-hidden
- Hide elements visually, but keep them available for screen-readers - see Jonathan Snook on accessibly hiding content
- .element-invisible
- Hide elements visually, but allow them to be focusable when navigated to via the keyboard
- .element-invisible.element-focusable
- A clearfix class for markup-free clearing
- .clearfix