When to use CSS preprocessor
CSS preprocessor
There are many css preprocessor out there like Sass, Less, Stylus... although they are great, excessive use of preprocessor is sometime a bad thing.
1. You don't need to
For example, if you are making a website for you friend or a local butcher, there's no point in using preprocessor! Of course they save your time but it's a terrible use user's internet resources and a waste of time.
2. All function are available in Js
When you think about it, all additional function of these preprocessor can be easily done in Js. For example, variables:
Less:
@blue:blue;Js:
var blue = 'blue';
document.getElementById('someId').style.background = blue;The same rule apply for any additional function and if you do it this way in js, you can dynamically change the variable by simply change the variable value!
When to use them?:
Here's a clever trick: Use preprocessor to write your css and then simply use a converter to change them back to CSS. This is safe your time and also save your user an additional file[s] to download!
Written by Minh
Related protips
7 Responses
When you already know CSS :)
Here's a clever trick: Use preprocessor to write your css and then simply use a converter to change them back to CSS. This is safe your time and also save your user an additional file[s] to download!
Are you suggesting that people send LESS through to the client and compile it there? That's just silly and is never helpful.
With tools like grunt or even the sass or compass command-lien tools, I was under the impression that compiling to CSS is a part of the deployment (or, development) process.
@joshhunt no, I'm saying to use any preprocessor to write and develop your code and then when you're ready, convert it back to css. The preprocessor is used so that it save you time.
Ehm, what?
To 1: I don't see how a well-written preprocessor-generated CSS-file uses more internet ressources that a default CSS file. Preprocessors save your time and keep your styles structured. Period. Use them for your neighbors butcher website, for your friends band site and for your pets homepage if you want to. It sounds like you are talking about client-side compiling like LESS can do it. Then you are having a point. But still – just use grunt or something similar – problem solved.
To 2: Replacing Style-Variables by Javascript? It is possible, yes, but it misses the point and puts performance tasks on the client again. Which you stated a terrible thing in the first place.
I disagree with #1, there are many simple programs that you can fire up and already have your CSS preprocessors going (Prepos, Hammer, CodeKit, etc). I 100% agree with @timohausmann.
2 doesn't make sense at all! Preprocessors are to manage the mess while you're styling. Using JavaScript makes an even bigger, unmanageable mess, and also is poor development practice. I could somewhat understand if #2 was using presentational classes, but JavaScript for styling is ridiculous.
Also I don't understand the additional downloads part, notwithstanding the use of preprocessors, users will be downloading the same amount of files, and if anything using preprocessors will make the files more efficient and smaller 9 times out of 10.
What you really shouldn't be doing with preprocessors is sending them to other people who don't understand them or to clients. Always send over the (uncompressed) compiled files and try to exclude them from showing up on the server.
You may want to evaluate how you are using CSS preprocessors. I may be missing something, but this doesn't seem to make a lot of sense.
Doing it in JS does not sound like a good idea at all. Plus, naming a variable "blue" is not very semantic, what happens if you want to change your color scheme? Will the "blue" var now be obsolete?
Imo you are totally missing the point of preprocessed CSS. You have to look at it as a compiled language. Client side processing, while actually possible, is not a real option. You don't ship the source to the client, because browsers interprets just plain CSS. SASS/LESS are not Javascript, they are not meant to be interpreted runtime, they aren't intrerpreted languages at all. You use them because they give you, as a developer, a higher level of abstraction, and once you use that abstraction to ease the developing process, you compile the source and only ship the final result to the client.
I see no reason not to do that, under any circumstance.
Have a fresh tip? Share with Coderwall community!