Funbox Theme CSS & HTML

This is my scratchpad for the FunBox theme.

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.

Object Classes aka same ole wheel just built ass-backwards

I’ve needed some additional uniqe ways to add element classes for specific stying and functionality. Sometimes these class names end up being cryptic because they contain either HTML tag names or element ID names as references to the function of the element. ID names are important because they should indicate a unique element, so confusing a class and an ID can cause problems. Confusing an HTML element used as part of a class can make things even worse.

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. I can make a rather verbose tag, but I can live with it. Here are the examples:

.header-

.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

For me, “-” is the new black.