Funbox Theme CSS & HTML

Class Element Naming Philosophy

A.K.A same ole wheel just built ass-backwards.

I’ve grown really tired of dealing with themes and CSS emphasizing the ID (all those #somethings you see in a stylesheet). The sometimes confusing cascade of CSS specificity can cause confusion and really big problems when you work on large enterprise style websites. I found it easier for me to use the ID for my Javascript and in some rare focused CSS. I also needed some CSS to use with some specific tags and the new HTML5 elements. Having class names related to the ID or HTML element is useful to me. I can identify the use of the class in relation to the unique ID’ed element or HTML tag.

To do this, I’ve started to use the “-” as a suffix for class names that are derived from the HTML tag or ID. For me, “-” is the new black. I’m sure folks will think it’s stupid, but it’s working well for complex websites where I have compound stylesheets (core website.css -> now where in department x website.css -> Department X has a sub-department.css -> did I mention that sub-department has this weird buried application.css). This trick is helping.

Here are some of those CSS class name examples:

  • .header- (this is also good for that HTML5 migration)
  • .form-
  • .footer-

Each class uses the ID or HTML element followed by a dash. It should validate and can work in layouts and compound class situations. If I want create a unique class element I can follow the dash with something appropriate:

  • .header-frontpage
  • .form-error-404
  • .footer-news

But since these are classes and not ID’s I can create compound styles:

  • .header- .frontpage
  • .form- .error-404
  • .footer- .news

Common element classes and ids

.hidden – is something hidden. Taken from default behavior for the labels used in the search form widget for WP 2.8

.clear, .clear-left, .clear-right – are block element clearing classes to eliminate or control adjacent elements float behaviors.

.error – is for site error messages where appropriate. I’ll add to those classes for specific errors like .error-404.

.message – is for site messages usually sent to current visitor in response to actions. Should be expanded with additional classes like adding class .error or .error-404 to style the message appropriately. Another example would be adding .email-success or some other positive reinforcing class.