Keeping It Clean

During my transition from fledgling independent developer to fully functioning member of the team at Made a few years ago, it quickly became apparent that the code I was writing needed a lot of improvement in terms of how legible it was to others.

Left to my own devices, the temptation when writing code was to try and establish my own style as though I was the Terry Pratchett of web development, but joining a team made it easy to see how quickly all of that needs to go out of the window in favour of simply writing code that is easily understood by as many people as possible.

CSS is an easy place to start, as the team at Made have adopted the style guide put forth by Google, a few key points being:

Listing style declarations alphabetically

Previously, I would try to group vaguely related declarations together:

padding: 10px;
border: 1px solid #000;
margin: 10px;
font-size: 22px;
color: #fff;
text-decoration: underline;

But as projects go on it’s not unusual for styles to be added, removed or altered, and often by someone other than the original author, who has their own ideas of how declarations should be listed. Listing declarations alphabetically removes all of that fuss immediately, and makes it very easy to find the line you’re looking for whenever you need to dive back into a project’s CSS.

border: 1px solid #000;
color: #fff;
font-size: 22px;
margin: 10px;
padding: 10px;
text-decoration: underline;

Whitespace and indentation

This is a practice that extends to languages beyond just CSS, but the idea is to pay attention to the way your declarations are spaced out, so that you don’t end up with headache inducing one-liners like this:

#myElement{border:1px solid #000;padding:10px;color:#fff;font-size:14px;display:block;}

And instead making sure each declaration is on it’s own line, indented with two spaces, and the value is separated from the property by one space, like so:

#myElement { 
  border: 1px solid #000; 
  color: #fff; 
  display: block; 
  float: left; 
  font-size: 14px; 
  margin: 10px; 
  padding: 10px;
}

Those two approaches are very easy to adopt, and make a noticeable impact on the readability of a stylesheet. At Made, the entire team works in Sublime Text 2, and we’ve found the following configuration options particularly useful in regards to the above:

"trim_trailing_white_space_on_save": true
"tab_size": 2
"translate_tabs_to_spaces": true

Of course, there is also SASS to help make your CSS look a lot prettier. It adds a lot of tools to your CSS arsenal, particularly variables and what are known as “mixins”. For example, variables allow you to declare a colour as a variable, such as:

$company_red: #880000;

You can then reference that variable throughout your stylesheet, applying it to as many elements as the design dictates, the benefit being that if the design is later changed and the colours with it, you then only need to update the variable with the new colour value rather than chasing down every instance of it in your stylesheet.

Mixins are similar to variables, but much more complex, in that you can define entire blocks of style declarations that you anticipate using repeatedly throughout your stylesheet:

@standard_block { 
  border: 1px solid #ff0000; 
  color: #000; 
  display: block; 
  padding: 10px; 
  position: relative;
}

That then becomes available to use on any element you wish to apply those styles to, and your code ends up looking much DRYer:

.foo { 
  @include standard_block;
}

Another personal favourite feature is the ability to import stylesheets into each other. Working in a text editor like Sublime Text 2, I permanently have the directory tree view sitting there in the left hand column, so I can jump between files easily. With the ability to import stylesheets into others, I can break stylesheets down into individual files that each have a specific responsibility and name them accordingly, a crude example being:

fonts.scss
colours.scss
header.scss
news_articles.scss
sidebar.scss
footer.scss

I’m then able to navigate easily to the relevant set of styles as and when I need to. By then importing all of those stylesheets into a “master” stylesheet, I’m able to have my element require just that stylesheet, so the user’s browser only makes one request and gets all the styles in one file.

There are many more ways to make your CSS look more readable, and it’s worth spending a little time on it now, as you’ll reap the rewards later when you need to revisit old code.

About the Author

Scott Mason

Former Software Engineer at Made Tech. Probably listening to soundtracks right now.

Avatar for Scott Mason

We are hiring! Find out more about a career at Made Tech.

Download a copy of our new book

Legacy technology is one of the biggest threats to public sector organisations.
Whether you’ve started your journey already or don’t know where to begin, this 160-page book has been written to guide you to define and implement the right approach for your organisation.