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.


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.


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

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

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

Good Practice

But don’t chain everything. For example:

Bad Practice

Good Practice

How to Chain Class Names with Sass

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

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:

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

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

CSS & HTML Expert

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store