Class Element Naming Philosophy
A.K.A same ole wheel just built ass-backwards.
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)
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:
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.