Corkboard CSS Style Guide
I’ve been thinking about CSS style for a few days now, so I figured it was time to codify our standards. Here are the best practices we recommend:
Alphabetized Stylesheets - There’s nothing more annoying than scrolling over a huge .css file to find one class definition. Alphabetizing the file makes any entry instantly findable.
Group Related Definitions - All the styles related to the header should be right next to each other. This works well with alphabetizing because each definition should begin with #Header. In general we prefer one big stylesheet, but if you begin to have an overwhelming number of header attributes, they could be moved to header.css.
Avoid Overloading Definitions - Just because 3 different types of text need to be bold, don’t define them all at the same time. It’s better for your stylesheet to be more verbose, but more easily searchable. Also, decoupled definitions makes things easier to change in the future.
Use id and class Semantically - ids should only be defined once on a page. They are a perfect fit for things like headers and footers.
Differentiate id and class Stylistically - They have different meanings, so they should look different too. Use UpperCamelCase for ids and lower_case_underscored for classes.
Use classes as Building Blocks - Define some commonly used classes with a single style element. For example:
.float_left { float: left; }
.margin_center { margin: 0 auto; }
.text_center { text-align: center; }
Since you can define multiple classes on an element, just include the building blocks you need. This works really well during the design phase since things will inevitably change around.
Good style is a requirement for a sustainable web site. If you use a consistent and reliable style, your future self will thank you.
Update: Jonny’s comment about the example classes is exactly correct. Those are really bad example to use. I’ve posted more about this in a recent entry.
