On Alphabetically Ordering CSS Properties
And other properties, really
It’s a beautiful sunny day out. You’re on your way back from the store when you see this person in the street:
You don’t know exactly who he is, but he seems vaguely familiar. You remember his name was Michael or something, but you’ve been living under a rock for the past couple of decades so you’re not quite sure.
When you get home you try to describe Michael to your friend Janice over chat, hoping she can help you remember who he is. How do you do that?
Let’s say you and Janice agreed to use a language similar to CSS, but for describing people. A popular way of listing CSS properties is alphabetically:
belt: 3in solid leather black;
build: athletic;
clothes: suit shirt tie;
facial-hair: goatee 3days;
fingers: 10 extra-long;
first-name: 'Michael;
glasses: sunglasses cool;
hair: medium straight brown full;
last-name: unknown;
max-age: 40;
max-height: 6ft 6in;
max-weight: 200lbs;
min-age: 30;
min-height: 6ft;
min-weight: 180lbs;
shoes: black official 14us;
shoulders: extra-wide;It’s certainly easy to list properties alphabetically — we can sort them in our IDE in seconds.
However, there’s a principle in the software industry that code should be optimized for reading rather than writing because we spent much more time doing the former.
Does the alphabetical order follow that principle?
What if we put the most relevant properties first? Michael Whatever, 30-something, tall, built like an athlete, wide shoulders, and the longest fingers you’ve seen in a while:
first-name: 'Michael';
last-name: unknown;min-age: 30;
max-age: 40;min-height: 6ft;
max-height: 6ft 6in;
min-weight: 180lbs;
max-weight: 200lbs;build: athletic;
shoulders: extra-wide;
fingers: 10 extra-long;hair: medium straight brown full;
facial-hair: goatee 3days;clothes: suit shirt tie;
glasses: sunglasses cool;
belt: 3in solid leather black;
shoes: black official 14us;
You might choose a different order of properties to describe Michael than someone else would. You might group the properties differently.
Is the order and grouping going to be perfectly uniform every time for every person describing anyone? Probably not, though we could enforce it using the right tools. We would need tools to double-check for alphabetical order anyway since people often forget to sort or make mistakes.
Then why not also go the extra mile and make our code more meaningful and easier to read rather than easier to write?
