As I develop my CSS skills and learn more about computer science terms I find myself thinking about the word class.

---

Class verb: assign or regard as belonging to a particular category
noun: a set or category of things having some property or attribute in common and differentiated from others by kind, type, or quality.

Classification the action or process of classifying something according to shared qualities or characteristics.

---

An HTML element doesn’t represent a classification of visual styles. So an HTML element isn’t always the best target for your CSS selectors.

Classes should be reusable. For every property you add to a class, the less reusable it becomes. The threshold for this is pretty low. Lower than most of the classes in production CSS.

If you are a programmer building an interface for a user to checkout, you wouldn’t have a function that:

• Parses the mailing address to make sure it's valid
• and triggers a transactional email to be sent
• and also adds all the items up for final price
• and also converts their currency to USD if it's an international order
• and also...

Hopefully you get my point.

I think you’d want those to be small functions that can be used anywhere someone needs them, with predictable results regardless of where they are invoked. Because you’ll probably have to sanitize email inputs in more than one place on your website. And writing that several times would be silly.

This is also how your CSS should be structured. You should build small classes and attach combinations of them to the elements that need those styles and none of the elements that don’t.

When I decide to group two or more properties together in a class I think, “Well if I need this rule I also definitely need this other rule to accompany it. All the time. They will always go together regardless of how the design will change.” In practice, I’ve found this isn’t a lot of things.

Properties that could be potentially grouped together:

• font-size and line-height
• text-transform and letter-spacing
• background-color and color
• display and vertical-align
• position and top, bottom, left, right values. Maybe with a z-index thrown in. Maybe.
• box-sizing and width
• white-space, overflow, and text-overflow

Properties that probably don’t belong in the same class:

• colors and height
• padding and text-transform
• width and margin
• cursor, width, top, and float
• border-left, margin, width, and background

These examples are from CSS classes in production CSS. From several large and well-known websites. These are orthogonal visual styles that don’t make sense together. When I look at them, I can’t make sense of how to reuse them. If your fellow developers can’t quickly figure out how to reuse your CSS, they will likely try and invent their own class(es) that work in the context they are designing for.

CSS is pretty useless if isn’t reusable. If you want some styles that aren’t reusable you’re better off writing inline styles and keeping them out of the global cascade.