Interview Series 1: Advantages and disadvantages of using CSS preprocessors

August 17, 2020

• 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;
  	}

  view raw sample.scss hosted with ❤ by GitHub

  Same code with SASS syntax is as shown below:
  

  	$primary-color: beige
  	.list
  	color: $primary-color
  	.alert
  	color: $primary-color

  view raw sample.sass hosted with ❤ by GitHub
  Same code, when compiled to normal CSS, leads to:
  

  	.list {
  	color: beige;
  	}
  	.alert {
  	color: beige;
  	}

  view raw sample.css hosted with ❤ by GitHub
  
  Here, same colour code can be used twice using SCSS syntax by declaring variables. You can find more information on the topic here: SASS docs

• Advantages 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;
    	}
    	}
    	}

    view raw alert.scss hosted with ❤ by GitHub
    
    The above code when compiled to CSS yields:
    

    	.alert { color: #000;}
    	.alert__title { padding: 10px;}
    	.track__title:hover, .track-title:focus { color: blue}

    view raw alert.css hosted with ❤ by GitHub
    
    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.

• 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.

• 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

• ← Create basic login forms using react.js hooks and bootstrap