Front-end web development is impossible without the use of HTML and CSS. Among the most popular CSS preprocessors are SASS, LESS, and Stylus. All these preprocessors have almost identical functionality since they are only minor differences in syntax. They extend the core CSS language with operators, variables, functions, and more. CSS preprocessors are increasingly used in large and medium-sized projects, as they are one way to automate site layout, providing better structuredness, easier editing, and code understanding.
Nesting stands out among the unconditional advantages of these preprocessors. In the past, front-end web developers have avoided centralizing CSS data in a single file by splitting it into smaller ones and importing it into a larger one or creating object-oriented CSS. This process has always taken a long time. This feature enables structuring elements, accessing the parent of a component, and writing pseudo-classes and pseudo-elements. Moreover, it solves the problem of the lack of visual hierarchy in classic CSS without add-ons.
In addition, these preprocessors bring the basic features of a high-level programming language to CSS, such as the use of variables, loops, math operations, if-else constructs, and more advanced functionality, for example, for working with colors. Moreover, the preprocessors offer mixins – functions that reduce the repeating in the code (Cinarli, 2014). Firstly, this function helps to use one of the main principles of DRY programming – Don’t Repeat Yourself. Secondly, it dramatically simplifies the work; for example, by changing the font size or color, I perform this operation in one line instead of a lot of effort required in classic CSS.
However, at the same time, CSS preprocessors have several disadvantages. For all their merits, mixins are the embodiment of advanced copy and paste functions within a single programming language (Silver, 2015). As a result of such actions, various properties are repeated in the code, which, although visually become more readable, increased the file size. In large projects, large sizes of CSS files can become, if not a problem, then definitely a disadvantage, slowing down the time of the site itself.
In addition, this add-on does not free programmers from the need for basic and advanced CSS knowledge. In practice, some developers do not know the necessary to build easily maintainable scalable structures. The result is a jumble of code that even the best visualization of preprocessors won’t save. Many tasks, however, can be solved without preprocessors, and their overuse leads to the next problem.
Debugging code written with CSS preprocessors takes more time. The direct definitions of design properties and the place of their use are often far from each other in the code, which can lead to a cascade of errors when fixing it in one place. Excessive use of extensions can lead to overdependence of specific properties, including ripple effects and complicating testing and editing.
Finally, preprocessors include a compilation stage, which, compared to classic CSS, does not save time and is accompanied by many additional steps in parallel. Code generation does not provide the kind of permanent control that is used in pure CSS development. Consequently, an error can lead to the need for recompilation, which again significantly increases the running time.
In conclusion, it can be argued that the use of CSS preprocessors significantly increases the readability and visualization of the code and makes development more accessible for programmers more accustomed to object-oriented or other high-level languages. Large projects should always use preprocessors responsibly since it’s easy to incorporate them into development, and going back to the original CSS is extremely difficult. I would use this technology in projects designed for a large front-end development team to increase communication ease. For relatively simple tasks, I would stick with classic CSS to save time.
References
Cinarli, B. (2014). An Introduction to CSS Pre-Processors: SASS, LESS and Stylus. HTML Mag. Web.
Silver, C. (2015). The disadvantages of CSS preprocessors. Adam Silver. Web.