CSS Preprocessors: Are They Worth It?Kristopher BullingerBlockedUnblockFollowFollowingMar 14CSS preprocessors promise to bring a lot of value to a development team, and indeed come packed with many features which CSS has lacked for years.
You will find that many established organizations rely on preprocessors such as SASS or LESS to organize their stylesheets, and many job postings ask that you come with some knowledge of these technologies.
This post is aimed at those who are less experienced in this area.
I will be presenting a summary of arguments in favor of and against CSS preprocessors, and my opinion on whether they are worth using on your personal projects.
Why You Should Use CSS PreprocessorsSASS and LESS (and similar libraries) have simple aims: to make it easier for you to style your app, and to keep you from writing more code than you have to.
The biggest use-case is with variables.
If there are colors, widths, margins or anything else that are used in many spots throughout your project, it is a pain to put these values in so many places throughout your app.
Nicer is to set a value once, and refer to it throughout your stylesheet as needed.
Any time you update this value, it only needs to be changed in one place.
Next, there is the ability for you to nest your selectors; that is, you can use a nested code structure to style an element along with any selectors that begin with it, as shown below.
follow-card { padding-left: 8px; position: relative; .
follow-image { width: 15%; } .
follow-details position: relative; overflow: hidden; top: 30%; width: 82%; margin-bottom: 6%; margin-left: 1%; display: inline-block; p { display: flex; justify-content: space-between; font-size: 1.
666em; } } div { width: 60%; display: inline-block; } img { width: 100%; border-radius: 50%; }}This allows for a very natural, easy appreciation for the sselector structure, rather than having a separate entry for each selector such as “.
follow-card .
follow-details p”.
There are other great features that these libraries allow, but in my opinion, these are the best features, and they are also extremely easy to implement.
What’s more, SASS compiles directly into regular old CSS: no need to worry about browser compatibility.
Why You Shouldn’t Use CSS PreprocessorsDespite these features, there are some opponents to the use of any preprocessor.
For one, there are the issues that come about when you introduce any dependency into your project: any bugs or unexpected behavior that comes from this library is thus inherited by your app.
When a bug arises from an external package, it can be hard to deal with.
Additionally, with the support of CSS variables, viewable to the browser and accessible with javascript (unlike SASS variables), one of the major use cases for preprocessors is hugely diminished in value, though browser support is not universal.
Otherwise, some would say that the use of SASS or similar is superfluous, and that there are great ways to organize your CSS without the use of these libraries.
Indeed, there are many ways to organize your CSS that you probably aren’t taking advantage of.
The most natural way to organize your stylesheets is by grouping selectors, and specifying all attributes relevant to these selected elements in one chunk — a small rethinking of this procedure into writing as few declarations as possible, as shown below, could reduce the lines of code in your css file by a surprising amount.
Taken from https://meiert.
com/en/blog/css-organization-and-efficiency/Sorting selectors and declarations in a logical way, too, can go a very long way in making your stylesheets easy to navigate.
At the point that you make use of these organization techniques, and if you choose to use CSS vars, it may not be worth it to you to refactor your project to use SASS.
My VerdictAt the end of the day there is little difference between a SASS-ified project and a well organized vanilla stylesheet.
I will state though that if you are unfamiliar with it, that you should definitely refactor or build a small project with SASS, simply due to the fact that it takes so little time to learn and is so pervasive — it is simply one of the best return on investments of your time.
I have refactored with SASS and found great joy in it, but in the future I will aim to go without it as well as I can.
.