---
status: "published"
title: "On Alphabetically Ordering CSS Properties"
date: "2020-12-02"
description: "And other properties, really"
image: "https://github.com/user-attachments/assets/96a6a2ec-a8f7-4160-919e-75c5144f1ade"
imageAlt: "Photo by Héctor J. Rivas on Unsplash"
author: "Vlad Sabev"
authorUrl: "https://github.com/vdsabev"
authorAvatar: "https://github.com/vdsabev.png"
tags: ["css","software development"]
navigationIndex: 0
---

Photo by [Héctor J. Rivas](https://unsplash.com/@hjrc33?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=medium&utm_medium=referral)

It's a beautiful sunny day out. You're on your way back from the store when you see this person in the street:

<img width="316" height="587" alt="Random person on the street" src="https://github.com/user-attachments/assets/f7ec41a7-8648-4703-9700-a3aabb804ef2" />

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**:

```css
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](https://www.goodreads.com/quotes/835238-indeed-the-ratio-of-time-spent-reading-versus-writing-is).

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:

```css
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](https://github.com/hudochenkov/stylelint-order). 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**?