Interview Series 1: Advantages and disadvantages of using CSS preprocessors

August 17, 2020

Image by gTheMesh from Pixabay
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;
    }
    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.


Saurabh Mhatre

Blog by Saurabh Mhatre
Follow me on Twitter