Over the last few months, a lot of my workflow has changed and it's certainly introduced me to new methods, as well as improve old ones. One of them was getting into CSS preprocessors, which is very useful for writing CSS in a developer-friendly way but also is helpful when working in teams and can make better CSS organisation.

While it isn't a necessity to learn a Preprocessor to write CSS, it can be a timesaver and can help with cleaner writing. In the past, I used to go against the flow and write caffiene-free stylesheets, since I didn't believe preproccesors would help too much. However, since I started working at JP74 I've been using them a lot more, as I started learning about them before joining there. We use preproccesors in a lot of our current projects and they are great to use across teams and help us write effecient code.

It's never too late to start learning something new

I'm fully aware that this isn't new, but I used to avoid preprocessors because I saw a lot of people make a big deal about them, how "it's better than CSS" and similar eventhough it's a different way of writing CSS, not a replacement language. However, it's better to join something than completely avoid it forever, especially if it's a model that has proven successful.

As I result, I started learning SASS and LESS. I started off writing simple things just to get used to writing variables, organise files and mixins. If you're new to the preprocessor bandwagon, it isn't too late even if you're very experienced with CSS, but there's things you have to learn in order to put into good practice with Preprocessors.

Finding your preprocessor preference

I guess the first thing you need to figure out is what preprocessor it is you need. Chris Coyier wrote a great article about SASS and LESS, explaining their differences as well as their advantages. Chris Eppstein has written a comparison list between the two as well, but the preprocessor of your choosing has to come down to what you want the most out of it, and what helps you write better CSS.

Perhaps you're writing a website as a team, or wanting it for your own personal style, or even what you think might save time on a project as well as benefit it more. Again, there's nothing wrong with vanilla CSS but a preprocessor might have to be considered for those factors. One example is LESS has a great Mixin Library available for it, LESS Hat, however SASS has the Compass  framework, which carries Mixins but also spriting abilities and clean CSS3 authoring.

Both have their own pitfalls (LESS I find a bit more complex and makes Codekit slower from my experience) but it also depends if you're using it in a team, and what benefits time on the project. Personally, I prefer SASS and using the Compass framework as it has settings for how and where the CSS is output and it makes use of the project structure you set up, but I do wish it had a better way of nesting media queries on elements.

It's a matter of depth and organisation

David Walsh wrote about redesigning his website using SASS and what he learned from it, especially about the way you write your CSS as well as the potential consequences (i.e. nesting, bloating, duplication). When you write with a preprocessor, try not to nest too deep into your CSS as that just adds bloat.

nav[role="navigation"] {
	width: 100%;
	margin: 20px 0;

	ul {
		list-style-type: none;

		li {
			float: left;
			width: 25%;
			text-align: center;

			a {
				color: $link;

				&:hover {
					color: $hover;
				}
			}
		}
	}
}

Writing your Preprocessor CSS should nest only around 4 or 5 elements deep like the above example, otherwise you're going a bit too deep and can bloat the compiled stylsheet. You should take advantage of mixins that help you generate CSS as well as provide prefixes for legacy browsers. Also, get comfortable with how you organise your files as you can read and write your files easier as well as better by seperating files then importing them into the main file, and then just generate it into one CSS file.

@import "variables";
@import "mixins";
@import "reset";
@import "grid";
/* All Main Styles to go in here...*/

/* Media Queries should be last */
@import "queries";

Above is an example of how I organise my files and keep everything in order; I like to get all the files that set up the project, as well as variables and mixins, set up at the top before the main stylesheet. Any media queries, however, I keep in a seperate file and keep them at the bottom of the stylesheet. It makes it easier for me to read as well as organise my stylesheet by splitting them into bits and importing them all into the main one.

Taking advantage of Preprocessor Power

Of course, at the delicious, chewy centre of a preprocessor is that it's got some programming power to provide styles. SASS and LESS are more programmer-friendly ways of writing stylesheets, and within reason. While it's a general rule of thumb to set some base styles in a CSS stylesheet, there may be point you'll have to reference the same properities and values throughout, which is where mixins and variables come in handy.

However, as well as that, math can also be involved, as well as adding your own functions and built-in ones for your own use.

$link: #0099ba;

@function relativeType($target, $context) {
	@return ($target / $context) * 1em;
}

article {
	width: percentage(460px / 960px);
	font-size: relativeType(18px, 16px);

		a {
			color: $link;

			&:hover {
				color: darken($link, 20%);
			}
		}
}

With the example given, I can use SASS and its built-in math functions (LESS has them too) and calculate the width needed for my element, responsively. I can also add my own functions for calculating relative type (thanks to a post by The SASS way with Responsive Web Design and SASS), and give its own arguments so the function can be used more than once to give different values per argument. Finally, I can use the built-in darken function (there's also others like lighten and saturate) to make my hover state have a slightly darker colour.

article {
  width: 47.91667%;
  font-size: 1.125em;
}

article a {
  color: #0099ba;
}

article a:hover {
  color: #004554;
}

With all that, it outputs the CSS given and it can help the workflow and make writing complex stylesheets easier. Preprocessors, again, can make your stylesheets more organised and keeps everything together.

That being said…

Do you really need a Preprocessor?

You might be thinking at this point what I'm about to say is truly insane, but what if you just needed Caffiene-free CSS? Preprocessors aren't for everybody, however if you want to write stylesheets in a developer friendly way, or want to take advantage of math and nesting, and it helps your project, go for SASS or LESS. However, there is nothing wrong with good ol' fashioned CSS, provided you have the time and the resources to make your work happen.

I enjoy using SASS now but it doesn't mean I never write CSS anymore; however jumping from one to the other is pretty confusing though isn't a bad thing. It really depends on the project at hand andwhat I, or a team, want to do. I'm very open to preprocessors but it's still CSS at the end of the day. If you're confident with CSS, give SASS or LESS a go, put in some practice, and while there will be people that will rally against them for numerous reasons, there's no harm in it. I recommend giving it a go.