A lot is being discussed about CSS Preprocessors in recent times. But then what are they? Is it another framework like Bootstrap? Well, the answer is No. It is not another CSS framework.
Preprocessors in general are programs that take one type of data as an input and give out another type of data as output.
A CSS preprocessor is a scripting language built on top of CSS that adds scripting functionality and gets compiled into regular CSS. They have their own syntax which is very similar to CSS but also gives you additional power to use variables, functions, conditional statements, arithmetic operations, etc.
Why use CSS Preprocessor?
I’ve heard a lot of colleagues ask this question. I can understand that that you are happy with the good old CSS and that you are doing a good job anyway. So were people doing with Horses before cars came! Anyway, to understand why do we need CSS Preprocessor, let us take a look at the current state using the native CSS.
- Currently in CSS building a function, reusing a definition or inheritance are hard to achieve.
- Maintenance of CSS in case of large projects or complex systems become very cumbersome. We all have been there.
- CSS is evolving and very often new features keep getting proposed. The browsers usually go ahead and support those features with their special prefix. Hence, to support them you need to use multiple prefixes every time. E.g Think of writing
-moz-border-radius: 10px; -webkit-border-radius: 10px;instead of justborder-radius: 10px; - Chances of page size increasing are very high especially if you are using a CSS framework and are trying to override the properties to meet your design requirements.
While the above listed are just a few of the challenges, once you get used to a preprocessor, you’ll be able to see a lot of other points yourself.
What are the benefits or advantages of using CSS Preprocessors?
While the advantages are many, some of the most common ones are as follows :
- You would have cleaner and organised code with reusable pieces that can be reused multiple times saving you time.
- Flexibility to do things on the fly using functions and conditional statements, Variables, addition, subtraction etc.
- Thanks to the opensource community, you can use many shareable snippets and libraries. You can contribute too !
- You wouldn’t have to worry about browser compatibility and can easily produce CSS that works across browsers.
- In many cases, this would help you have a lighter page with Smaller CSS file size. Especially if you are using a CSS framework that supports a CSS preprocessor.
- Import feature in most of the CSS Preprocessors enables you to split modules/components into different files.
What are some disadvantages of using a Preprocessor?
While the advantages are many, there are few disadvantages too.
- Debugging is harder and difficult as the files finally get compiled into CSS. However, SourceMaps can be of real help here.
- Compilation slows down development as per some people as they have to compile after every time they write something in order to preview it on browser unlike native CSS. This too can be handled using “Watch” features in GulpJs or Webpack etc
- Performance is compromised if best practices are not followed. It can have reverse effect of bloating up the CSS file too if not used carefully and if the best practices are not followed.
- Knowledge gap is prevalent and hence requires people to first learn this before they can start any work.
While there are disadvantages that we can definitely think of, I believe the advantages easily overshadow the disadvantages and these should not stop you from using them.
Which are the Most Popular CSS Preprocessors?
While there are many CSS preprocessors available in the market now, SASS/SCSS and LESS have become the most popular and widely supported ones. However, to answer the question I would say the following are some of the popular ones :
There are many more and the list keeps on growing however the above-listed ones have been popular for some time.
What are some of the prominent features that CSS Preprocessors support?
All of the CSS Preprocessors have their own unique features and functionalities that make them stand out, however, there are few features that and common across the popular ones. They are :
- Variables
- Nesting
- Mixins
- Inheritance
- Importing
- Color Functions
- Mathematical Operations
To summarize I would like to say that CSS Preprocessors can help you speed up the work and also organize the CSS in a powerful way. While there are many CSS Preprocessors available out there nowadays, try to use the popular ones with good community support or the ones you really like. No Matter which one you choose, try to stick to the best practices and also try to explore the inbuilt features and functionalities. While it does require you to put in some time and effort to learn the language, believe me, it’s worth it! So are you gonna explore any CSS Preprocessor? Let us know in the comments!