Interview Series 1: Advantages and disadvantages of using CSS preprocessors
August 17, 2020
Image Source: Pixabay
A popular frontend development question asked in interviews is ‘Do you use CSS preprocessors? What are their advantages and disadvantages?’.
In today’s article let’s learn about CSS preprocessors and how to answer this question in interviews.A CSS preprocessor is a program/utility which lets us generate CSS from the preprocessor’s own unique syntax. Most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on.
These features make the CSS structure more readable and easier to maintain especially for large production level projects.
Introduction
CSS preprocessors make it easy to automate repetitive tasks, reduce the number of errors and allow us to create reusable code snippets.
The three most popular and stable CSS preprocessors currently are Sass, LESS, and Stylus. Let’s see how we use SASS in brief so that we get a basic idea about CSS preprocessors.Sass
Sass is the oldest CSS preprocessor, initially released in 2006. Sass can be written in two types of syntax. The.sass
file extension uses the older syntax that is indentation-based and omits semicolons and curly brackets from the code. The newer and more widely used syntax belongs to the.scss
file extension and uses the standard CSS syntax with braces and semicolons.
SCSS syntax:
The code below declares a variable$primary-color
and then it is used to apply the color body text./* SCSS */ $primary-color: beige; .list { color: $primary-color; } .alert { color: $primary-color; } Same code with SASS syntax is as shown below:
$primary-color: beige .list color: $primary-color .alert color: $primary-color
.list { color: beige; } .alert { color: beige; }
Here, same colour code can be used twice using SCSS syntax by declaring variables. You can find more information on the topic here: SASS docsAdvantages of using CSS Preprocessors
- Option to add variables, mixins and functions for code reusability
Basic CSS is direct and offers less flexibility. With CSS Preprocessor, we can add variables and functions which facilitates easier and efficient development. It also makes our code more organised and clean. - Hierarchy
With CSS preprocessors it is easy to group parent and child elements into modular blocks which allow us to manage code easily..alert { color: #000; &__title { paddding: 10px; &:hover { color: blue; } } }
The above code when compiled to CSS yields:.alert { color: #000;} .alert__title { padding: 10px;} .track__title:hover, .track-title:focus { color: blue}
As we can see in the original SCSS snippet it’s easier to write styles for nested components using preprocessor and also the code becomes easier to maintain. - Easy to join multiple files
CSS Preprocessors offers a special functionality of joining multiple stylesheets into one. We can create different files for each screen or pages and then import them all in the main CSS file.
After that, only the main file needs to be imported on the website and internal files will be read from the server.
A major advantage of this approach is that multiple calls to the server for CSS files are avoided.
- Option to add variables, mixins and functions for code reusability
Disadvantages of using CSS Preprocessors
- Compilation takes longer time
Compilation times can be really slow, even when using the best tool, mainly because SASS compiler run every time we make file minor file changes. We know that feeling when live reload takes a lot of time while developing website mainly because every SASS file needs to be converted into CSS before the output can be shown on the browser. - They can produce very large CSS files
Source files may be small, but the generated CSS could be huge which can increase time for the request to complete. - Extra Tooling and developer inconvenience
CSS preprocessors require extra tooling and knowledge about using the preprocessor properly. These preprocessors need to be understood and their corresponding libraries need to be maintained and upgraded from time to time.
- Compilation takes longer time
This completes the first part of the interview series questions. We will cover some more topics and questions in upcoming articles. You can connect with me on LinkedIn or Twitter for getting guidance or solving doubts related to frontend development.
Blog by Saurabh Mhatre
Follow me on Twitter