CSS Property Ordering, SCSS Lint and Why They'll Make Your Life Better

Compare these two CSS snippets that do exactly the same thing:

h1 {
	font-size: 200%; font-family: arial, sans-serif;
	color: #080;
	margin-top: 1em;
	font-weight: bold;
	background-color: #000;
	padding: 0.5em;
	margin-bottom: 1em;
}

h2 {
	font-size: 150%;
	padding: 1em;
	background-color: #666;
	margin-bottom: 2em;
}
h1 {
	margin: 1em 0;
	padding: 0.5em;
	color: #080;
	background-color: #000;
	font: bold 200% arial, sans-serif;
}

h2 {
	margin: 0 0 2em;
	padding: 1em;
	background-color: #666;
	font-size: 150%;
}

Both of these are correct. But assuming you have to revisit this code in six months, or inherit it from another developer, the latter is definitely preferable. Related properties such as margin and padding are grouped together, shorthand syntax is used where relevant to make it easier to read and the properties follow a consistent order in different rules.

If only there was a simple way to enforce such a thing for yourself and others.

Enter SCSS-Lint! Assuming you’re happy working with SCSS, this is a really handy tool that checks your code for you.

The specifics of what the linter looks for are up to you, but it can be configured to check everything from syntax errors to making sure your CSS properties are in a strict order.

A basic example

Take the following SCSS:

header {
	span.logo {
		position: absolute;
		width: 350px; height: 125px;
		padding: 10px 20px 0 20px;
		top: 0;
		display: block;
		border: 1px $black;
		background: url(../images/logo.png) 0 0 no-repeat $white;
		padding: 0 20px;
		left: 30px;
	}
	.contacts {
		text-align: right;
		font-size: 200%;
		float: right;
		font: 130%/15px 'Comic Sans', sans-serif;
	}
	position: relative;
}

This is perfectly valid and compiles as you’d expect. However, SCSS-Lint disagrees with it for many reasons:

scss/style.scss:2 W Rule sets should start with @extend declarations, followed by properties and nested rule sets, in that order

This message is warning the user that properties should come before nested rule sets – the position: relative; rule hiding down near the bottom could be easily missed.

scss/style.scss:4 W Properties should be sorted in order, with vendor-prefixed extensions before the standardized CSS property
scss/style.scss:14 W Properties should be sorted in order, with vendor-prefixed extensions before the standardized CSS property

This warning indicates that CSS properties have been added in an order that is incorrect (according to the configuration file).

scss/style.scss:5 W Shorthand form for property `padding` should be written more concisely as `10px 20px 0` instead of `10px 20px 0 20px`
scss/style.scss:9 W URLs should be enclosed in quotes
scss/style.scss:12 W Rule declaration should be followed by an empty line
scss/style.scss:18 W Rule declaration should be followed by an empty line

These are enforcing a style guide to keep renegade developers (or yourself) in check.

How to start using SCSS lint

The best place to start is to check the requirements and installation instructions.

Once you have it set up, have a look at the configuration options.

Finally, lint some files by running scss-lint from the command-line and passing in a directory (or multiple directories) to recursively scan:

scss-lint app/assets/stylesheets/

Though it’s more efficient to specify folders and files to process:

scss-lint app/assets/stylesheets/**/*.css.scss

There’s a grunt task available too which is our preferred approach (note: we've switched to Gulp since this article was published). If you’re not familiar with grunt then it’s well worth a look, this article is a good introduction: Grunt for People Who Think Things Like Grunt are Weird and Hard. If you prefer an app then take a look at Prepros (Windows) or CodeKit (Mac).

Property Sort Order

One of the most useful features is the property sort order that we discussed at the start. It helps to make sure that whoever works on a project, the output is consistent, at least at a ruleset level.

Which property order is best for your project is up to you, however, our typical project configuration adds properties in the following order:

Positioning

  • position, top, right, bottom, left, display, float, clear etc

Tables and Flexbox

  • table-layout, border-collapse, align-items, justify-content etc

Layout

  • width, height, margin, padding, border etc

Decoration

  • color, background, opacity etc

Typography

  • font, list-style, outline, text-align etc

CSS3 enhancements

  • transform, transition, box-shadow etc

Anything that isn’t defined can be safely added at the end of a ruleset. For example we don’t enforce a sort order for zoom because it’s only used for IE hacks, so doesn’t deserve a place.

You can see a copy of our config file including property sort orders here.

Summary

CSS property ordering and SCSS-Lint are handy methods of keeping your SCSS consistent and presentable.

The greatest benefit for us is enforcing a strict style for SCSS documents, so that whenever you pick up someone else’s code, you know exactly how rulesets will be formatted and can be safe in the knowledge that there are no conflicting declarations or obscured rules in unexpected places.

Published on

12th June 2014
by Colin Richardson

Filed Under

Front-end

How can we help?

Please send us some details of your requirements and we’ll be in touch.

Please note by submitting your details you are agreeing for Bigfork Ltd to store your data in order to process your enquiry and that you have read our Privacy Policy.