One Simple Rule to Organize Your CSS the Right Way

December 2, 2019 | by Marc Bacon

Technically there is not a “right” way to organize your CSS (cascading style sheets). Browsers do not care what order anything is in or if you have used an incorrect number of spaces.

So why should I organize my CSS?

CSS declarations should be organized for one basic reason, it makes your files easier to read. When a file is easier to read, it is easier for future developers to work with, easier for you to debug, and easier to optimize.

My One Rule About Organizing CSS: Declarations Should be Ordered Alphabetically

That’s it. Declarations should be entered in alphabetical order. I have tried several different methods for organizing my CSS and this is the one that I have found to be most effective and easiest to read.

Refresher: What is a CSS Declaration?

A CSS declaration is a single line of CSS that falls between the curly braces. Typically like this one:

background: #fff;

Each declaration is a part of a declaration block that looks like this:

.neato {
    background: #333;
    color: #fff;
    padding: 1rem;
}

Example: Doing it the Right Way

Below is an example CSS declaration block that shows why alphabetical order is the way to go.

Wrong

.neato {
     padding: 10px 30px;
     text-transform: uppercase;
     border: 2px solid #1f4b5d;
     color: #d8dbe2;
     display: inline-block;
     border-radius: 5px;
     font-family: 'Open Sans', sans-serif;
     margin: 20px 0;
     text-decoration: none;
     color: #333;
     background: #1f4b5d;
 }

Right

.neato {
     background: #1f4b5d;
     border: 2px solid #1f4b5d;
     border-radius: 5px;
     color: #d8dbe2;
     display: inline-block;
     font-family: 'Open Sans', sans-serif;
     margin: 20px 0;
     padding: 10px 30px;
     text-decoration: none;
     text-transform: uppercase;
 }

See how much easier it is to read the second option? It is easy to find the declarations in the second view at a glance, whereas the first example requires some hunting.

Did you notice that color is declared twice in the wrong example? When declarations are organized alphabetically, it is easy to catch duplicate declarations. This leads to cleaner, leaner code.

There are tons of strategies for organizing your CSS. Technically, none of them are wrong and none of them are right. This is the one rule that I swear by after years of writing CSS.

Be Mindful of the Cascade

Since CSS declarations are cascading, it is important to note that not everything should be ordered alphabetically without considering the cascade. I would personally avoid using some sort of alphabetization algorithm to rearrange code as trouble could emerge if the margin-left and margin declarations in the example below are reversed.

.neato {
     margin-left: 20px;
     margin: 0;
 }

I would argue however that the above code is poorly written as the initial margin-left should simply be removed. It is an example of an issue that could arise if previously written code is alphabetized. If alphabetization is used when writing the declarations in the first place, this poor practice of duplicating margin declarations could be avoided.