How to Create a More Readable CSS

Elad Shechter
Feb 10 · 3 min read

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade