Use CSS Preprocessors or Else

As most of you know, CCS is a language used to determine the appearance of HTML pages. Over the past couple of years, CSS preprocessors were introduced to add extensive functionality to CSS that should have been there in the first place. These preprocessors basically supercharge your CSS files.

There are a number of CSS preprocessed languages, two of them are – LESS and SASS. To decide which one you’ll want to use, you should consider your workflow. For example, if you’re using the BOOTSTRAP framework, LESS is the ideal choice since BOOTSTRAP was written in LESS. SASS on the other hand is more ideal if you’re working with Ruby on Rail projects, since SASS was written in Ruby. Ultimately, it really doesn’t matter which one you choose because both languages will help you to become more efficient.

CSS preprocessors make your lives easier by eliminating repeating styles and by making it less tedious to code.

For example, how many times have you found yourself doing this:

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 32px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #333;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #333;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #333;
}

Here’s the same code written in LESS:

.header-styles {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 32px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #333;
}
h1 {
	.header-styles;
}
h2 {
	.header-styles;
	font-size: 24px;
}
h3 {
	.header-styles;
	font-size: 18px;
}

As you can see, we wrote less code to achieve the same results. We declared a class which holds all the global styles, and then within each of the headers we called the class and changed only what we needed to change. If you compare the two, the one written in LESS is more organized and easier to read.

To take the power of preprocessors a step further, let’s look at another example:

In this example, let’s take a look at variables.

.button {
	color: #fff;
        background: #B41F24;
}
.link {
	color: #B41F24;
}
.sidebar {
	padding: 1em;
	border: 5px solid #B41F24;
}

Now, let’s write this in LESS:

@theme-color: #B41F24;

.button {
	color: #fff;
	background: @theme-color;
}
.link {
	color: @theme-color;
}
.sidebar {
	padding: 1em;
	border: 5px solid @theme-color;
}

So let’s consider you had to update the theme color to a different color, with variables, you can now make those color updates much quicker.

In addition, CSS preprocessors have other features such as mixins, math operators, nesting, and functions that you can use together; thus, making your site easier to maintain.
So what are you waiting for?

CSS preprocessors…

1. Make your code easier to maintain
2. Keep your code more organized
3. Are easy to set up
4. Save you time
5. And ultimately will make your sites better and easier to maintain

Go and try it, I’m sure you’ll love it just as much as we do.