Arin Adamson
By Arin Adamson | Web Dev | September 15, 2015

The Benefits of CSS Precompilers

css-article-imageWhen I discovered CSS precompilers, my world suddenly changed. It became a world where CSS is intertwined with many of the benefits of a standard programming language. No longer do I have to deal with disorganized CSS stylesheets or be burdened with creating the same set of rules for various different selectors. No longer are changes and edit to the design a long messy process. In essence CSS precompilers have eliminated a majority of the faults of the CSS language.

Organization

If you have been in the web development game as long as I have, you can understand how messy and disorganized a stylesheet can get. When you are dealing with hundreds and possibly thousands of selectors, which each need a set of rules to conform to your design, it’s quite a task to keep a single stylesheet organized and clean. CSS precompilers solve this problem. Take SASS for example. Users have the option to write their CSS in a hierarchacal fashion. Instead of listing a selector under the <header> tag as header.example, you can do something like this:

header{
display:block;
position:relative;
max-width:1200px;

.example{
position:absolute;
left:0;
right:0;
margin:auto;
width:50%;
}

}

Isn’t that a much better method to target selectors? I can’t even fathom how I lived without this organizational method in the first place. This isn’t all CSS precompilers have to offer for organizing your CSS. CSS precompilers allow you to split your CSS up into multiple files and then compile all of those files into one CSS stylesheet. Some compilers will even minify the stylesheet for you! All of these added benefits of CSS precompilers makes it much easier to for you to collaborate with a team, and if you are going solo it makes it easier to look at and edit your CSS stylesheet.

Eliminating Repetitiveness

Typical programming languages allow you to generate functions, classes and variables that can be used over and over again to perform the same tasks. However, with CSS that functionality is not there. The same exact rules that you have for one class with slight modifications or additions will need to be written separately most of the time. But if you are using a CSS precompiler functions, mixins, includes and variables are here to save the day.

Functions add in an awesome ability to adjust rules on the fly in your CSS stylesheets. Functions accept arguments, which can be used to adjust and then set a collection of rules for a selector. Mixins, on the other hand, give you the ability to define a set of rules in one central location and then include those set of rules through out a stylesheet on various different selectors. Additionally, just like other modern programming languages, CSS precompilers include the ability to set and call variables. You declare a variable, set it’s value and then call the variable where you would like. These are very powerful abilities, which no web developer or web designer should live without. Check out the example below, where I use all of the mentioned abilities to set a few selectors.

$basebg: #fff;

@mixin trans{
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}

@function primary-color-rgba($o){
@return rgba(228,122,122,$o);
}

.example{
background-color: $basebg;

.child-example{
background-color: primary-color-rgba(.5);
@include trans;
}

}

Easy Maintenance

With the ability to create variables, functions, mixins and to structure and organize your CSS, maintenance becomes a simple process. A change in colors, widths, transition timings and other design rules can be adjusted across a website, with one or two edits to the precompiled CSS stylesheet. If you’ve organized your precompiled CSS project well you should be able to find the variables or set of rules to edit quickly. If you’ve utilized the abilities to create variables, functions and mixins making universal changes should be a piece of cake.

Getting Started

If this is the first you have heard about a CSS precompiler you are probably wondering where you should start? There is more to CSS pre-compiler languages than what is mentioned in this article, including conditional statements. I’d recommend referring to your chosen pre-compiler language’s documentation to understand the syntax of each. There are a few CSS pre-processor languages that you can choose from. I personally choose to use SASS, but you can use others such as LESS or Stylus. Additionally, you will need a CSS compiler. I have chosen Koala, which can compile both SASS and LESS.

Once you’ve chosen your CSS Precompiler and CSS Compiler you will be well on your way to a simpler, more organized, and easier to maintain programming experience!

background dots

Related Topics

5 SEO & Paid Media Strategies To Learn From Your Competitors

by Keith Newsham

Additional Contributors for this piece: Kim Brown, DRA Paid Media Strategist Looking for new sources of organic traffic? Of course you are! How…

Brand Consistency: The Secret Ingredient to Successful Paid Search

by Natalie Hanes

Branding is one of those nebulous, mystical terms. With its unintuitive metrics and nontactical strategies, branding is an integral thing that often gets…

Building an Account Funnel for ABM

by Andrew Seidman

With any campaign, proving success with clear reports is a critical feature. This is especially true for account based marketing campaigns, but there’s…

In the time it takes to read this sentence, you could be on your way to a well-oiled demand generation machine. Ready for your blueprint?

yes, i want my Digital blueprint