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