“There are only two hard things in computer science: cache invalidation, naming things and off-by-one errors” – Phil Karlton
I’ve had several goes at coming up with a naming convention for CSS classes to be applied to buttons and message boxes in applications and I’ve never been completely satisfied with my solutions.
Typically I have four styles:
- Green* – to indicate success, addition or a positive outcome
- Red* – to indicate failure, deletion or a negative outcome
- Blue – for help dialogs, additional information or ‘other’ actions
- Grey – disabled, inactive, unavailable, subtle hints
I split my CSS to have a button class which provides the default look and feel of all buttons (size, shape, font etc) and then have a series of classes which colour the buttons appropriately. The same would apply to message dialogs. This is exactly how the Twitter Bootstrap library works. But what names should we give to these classes?
Thing’s I’ve tried for buttons:
[ .add, .remove, .filter, .disabled ]This set evolved as I developed an admin UI. I need buttons to add new items, remove items and filter the list. Everything seemed great until I added an extra page that needed a green button to confirm an action and I had to use a the .add class. That seemed wrong. So on the next project I evolved.
[ .green, .red, .blue, .grey ]This set works great. You never have a conflict of meaning, you want a green button, you ask for a green button. There’s no mental overhead of remembering what name you gave the class. It’s fantastic. Except it isn’t. Every time I used a .green class I could hear @sheerman shouting at me for being un-semantic. I could also picture a future where ‘other’ actions buttons might not be blue anymore, but they’d be stuck with the .blue class. This wasn’t the answer.
[ .success, .danger, .primary, .info ]We’ve recently been trialling Twitter Bootstrap for some admin area UIs. It’s great. However, it’s choice of naming is a little bizaare. Success and danger don’t match. Success and failure, fine. Safe and danger, also fine. But mixing meanings is just awkward. It did get me thinking though and has led to the new proposal.
The next attempt
[ .positive, .negative, .primary, .secondary ]
With the help of Paul Leader, I’ve put together this set. It builds on the Twitter nomenclature and tries to standardise into groups of adjectives with clear semantics.
Positive and negative reasonably well describe any action that would warrant a green or red button. They also work for success and failure dialogs, in which case the set could be extended to include .informative and .neutral.
My blue and grey buttons tend to be actions or navigation that don’t mutate data. I think that primary and secondary is a good way to think about such actions. For example, a Search button or a Next button in a process is a primary action whereas a Back button is secondary.
What do you think? Am I over-thinking this? Do you have a set of names you use and like? I’d love to hear your thoughts!
* Of course, relying on colour alone is not sufficient as colour blind users will be unable to distinguish states. Clear use of language as well as commonly recognisable icons are essential for a usable UI.
