How to Create a More Readable CSS

There are two types of web developers in the CSS world. The first type — which is 90 percent of developers — writes every property in a separate line. The second type of developer writes full line properties per CSS selector; they are the remaining 10 percent.

It might not surprise you that I’m among those 10 percent, and in this post, I will try to explain why writing CSS in one line is much more readable.

Sass for Separation

These days, most web projects use some form or other of a CSS preprocessor, such as Sass, Less or any such kind.

Working with CSS preprocessors makes it a lot easier to arrange code in small files and divide it into small components.

Example:

/*main parts*/
@import "2-components/main-header.scss";
@import "2-components/main-nav.scss";
@import "2-components/mega-menu.scss";
@import "2-components/main-social.scss";
@import "2-components/main-side.scss";
@import "2-components/main-footer.scss";

The separation into small files helps us understand the code better and focus on what matters to us.

Ordering the Properties by Type

There are many types of properties: layout properties, positions properties, box-model properties, font properties, and others.

Understanding this helps us order properties by their types, so when we read them, it’s a lot easier to orient ourselves in our code.

Example:

.some-component{ 
    /*position*/
    position: sticky; 
    z-index: 10; 
    top: 0;
    /*layout*/
    display: flex;
    align-items: center;
       
    /*box-model*/
    padding: 15px;
    border: sold 2px red; 
    
    /*font*/
    color: $common-color-1;
    font-size: 14rem;
    /*animation*/ 
    transition: 0.3s height;                 
}

Writing each property on a separate line creates large CSS files, which for me, is like reading a book in which every word is on a separate line, without context.

When writing CSS in one line, I divide the styles into types and give each type its own row. This way I can quickly scan and find my necessary style.

An Example of styles in a row

.some-component{ 
    position:sticky; z-index:10; top:0;     /*position*/
    display:flex; align-items:center;       /*layout*/ 
    padding:15px; border:sold 2px red;      /*box-model*/
    color:$common-color-1; font-size:14rem; /*font*/
    transition:0.3s height;                 /*animation*/ 
}

Sometimes, if there is only one property in a type, I will add it to a row with another type. Example:

.breadcrumbs{
   color:$common-color-1; font-size:14rem; padding:4px 0;
}

Chaining CSS Class Names

In CSS, it’s always better to write less specific selectors, since that makes it easier to override the selector when needed.

Bad Practice

.breadcrumbs .breadcrumbs-list{}

Good Practice

.breadcrumbs-list{}

But don’t chain everything. For example:

Bad Practice

.breadcrumbs-list-item{}

Good Practice

.breadcrumbs-item{}

How to Chain Class Names with Sass

Chaining classes with Sass is very easy: use the & char.

.breadcrumbs{
   font-size:14rem; color:$common-color-1; padding:4px 0;
   &-list{ display:flex; }
   &-item{ display:flex; align-items:center; }
}

When looking at the structure of a Sass file where all the context is on one line, it’s a lot easier to see all the selectors at once, and that makes it a lot easier to connect its HTML component.

HTML of the Breadcrumbs Component:

<nav class="breadcrumbs">
    <ol class="breadcrumbs-list">
        <li class="breadcrumbs-item">
            <a href="/">
                <span class="text">Home</span>
            </a>
        </li>
        <li class="breadcrumbs-item is-active">
             <span class="text">News</span>
        </li>
    </ol>
</nav>

Final Words

Ease of reading and an intuitive connection between CSS and HTML are the main ideas behind writing CSS properties in one line.

I hope you’ve enjoyed this article, and that now you understand better how to arrange your code, and maybe you’ll consider writing CSS properties in one line 😃.

If you like this post, I would appreciate applause and sharing 🙂.

You can follow me via Twitter.

More of my CSS posts:
Normalize CSS or CSS Reset?!
CSS Architecture — Folders & Files Structure
CSS Architecture for Multiple Websites
Naming Things in CSS

Who Am I?
I am Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture. I work at Investing.com.

You Can find me in my Facebook groups:
CSS Masters
CSS Masters Israel