The Problematic Nature of CSS Pre-Processor


Why do I need CSS pre-processor?

Well, if you are a new developer, then I can bet you must be wondering, why do I need CSS pre-processor? You must have received plenty of times advise to learn pre-processor. It requires long training to learn CSS pre-processor like ┬áSASS, LESS, Stylus, etc. So, that’s why this question is very important as you want to waste your time for nothing. That’s why it is highly important to learn the reason of learning these tools.

Pre-processors has received a mixed reaction from the coders, so that’s why we are going to throw some light on the unnecessary features of preprocessors. The features which are nothing, but an extra burden for developers.

The overdose features of CSS pre-processor

Okay, you might be thinking that this some heavy terminology, but you are wrong. As in technical terms, it means to describe that an object should copy all the properties from another object. Yep, in simple terms mixin means copy and paste. A mixin is just a fancy term, nothing else, which I might say is a very dumb feature of the preprocessor. Because as you see when whole properties are copied, which is very bad, the file size will increase a lot and performance will highly be affected.

Mixing will dramatically complex the coding and create chaos. Suppose, if you are working on a big project with hundreds of lines, then imagine what circus it will create? This isn’t the problem of anyone pre-processor language as all of them has the duplication issue. So, avoid duplication as if your CSS pre-processor decided to change server, then it will become hard to maintain.


Well, extend is like a smarter mixin, which multiplies the codes instead of duplicating. But, it doesn’t mean that extend is perfect as it contains few flaws as well. First of all, the task of extending can be achieved manually very easily. Apart, from that selecting the number of selectors is a big issue. As if you @extend the same base class multiple times you may end up with a rule that has thousands of selectors, that can be bad for performance.

Another problem with extending is that every class you create to be used only by @extend is going to be included in the compiled file which creates a problem from some cases. The problem of extending only occurs in SaaS. So, we can only hope that Saas rectifies it soon.


Few people might not agree on this problem as I have seen numerous nesting fans. Well, nesting is cool, it allows the coder to nest the code to child element instead of repeating it again and again. But, by abstracting the selectors it becomes very easy to be over specific and specificity is hard to handle and a bad thing for maintainability. In short, if you don’t have a child element, then nesting is useless.

Wrap up

Well, there is no arguing that these tools have some cool feature, like color manipulation, variables, math helpers, logical operators etc. But, real problem is that none of these features improves your workflow. So, you see these tools are not bad and learning them won’t harm you, but you can easily survive without them. That means it’s totally up to you if you want them or not.

About the author

Arpit Agarwal

I am a freelancer content writer, web developer and Video editor who loves to write technical stuff and on the other hand makes awesome videos as well. I like to make people happy with my writing and also try to make sure, you come back to read more.

By Arpit Agarwal

Most common tags

%d bloggers like this: