How prominent are CSS pre-processors in the real world? Just curious if they are a standard these days so I have some insight on how much attention to pay to them.
I am a sr developer for the e-comm team at Wendy’s. We use LESS on several projects. It can’t hurt to be familiar with it, but I wouldn’t spend too much time on it. it’s the sort of thing most places would just expect you to pick up once you are there.
1 Like
could I look at jQuery the same way?
Never worked anywhere that hasn’t used one, it’s very difficult to maintain CSS code at the best of times, so a preprocessor is generally seen as a necessity mainly for a. variables and b. splitting code into modules.
Scss won, though Less is used a bit. PostCSS can do everything Scss can do and is a lot faster to compile but more of a pig to set up. You get variables out of the box with native CSS now so that’s becoming less of a necessity, but the modularisation bit continues to be important, a preprocessor makes it dead simple.
They’re very easy to use, just a layer on top of CSS; as @Jason_L says don’t spend too much time on it. Just be aware of them.
jQuery is becoming much less important because a large % of the things it introduced to fix problems with browsers have now been taken up by browsers. It’s still really useful for some things, be aware of it, it’s a very good library and it’s used all over the place. But actively removing jQuery from codebases is pretty common, as is starting new projects without it, because it’s a lot less necessary nowadays.
Also it’s a direct DOM manipulation library. So if you use something like Angular/React/Vue etc, they get rid of that manual manipulation step, handle it for you, so jQuery is completely unnecessary if you’re using that. jQuery is a good fit for little bits of interactive stuff on a website, it’s a bad fit for JS apps which is where a lot of stuff has gone in the direction of.
4 Likes
jQuery is awesome, but nowadays most of what’s it was used for can be done with the newest versions of JavaScript, or is handled by other frameworks.
As a matter of fact, jquery “addiction” is seen as a handicap in the industry, and to be completely honest, that’s the whole reason I joined the camp. I needed a structured place to “go back to basics” on vanilla JavaScript.
So jquery is a good thing to know, just try identify when it’s really adding value to your project.
As for CSS preprocessors, i think it’s pretty much an industry standard, in order to make code modular and easier to maintain.
Sure, you can write vanilla CSS for a small project where you have full control and might not require changes for years to come (and when change comes, it’ll be a full remake), but the moment you start working with teams in bigger and more dynamic projects, it becomes an absolute necessity.
But don’t be discouraged by it… SASS is something you can learn literally in a single day. And I believe you totally should.
Dan: CSS variables are fundamentally different from SASS ones, and it’s fairly common to use both tools together.
For instance, you can’t set a CSS variable for media queries break points, among many other limitations. But in turn their runtime life, DOM inheritance and the possibility to just redefine their values for a given sub-scope instead of repeating the whole property declaration, as well as the possibility to easily change them ar runtime with JavaScript, are extremely welcomed.
Using CSS Variables on modifiers for pseudo classes is my favorite CSS feature since flexbox.
Here’s a little pen to showcase that:
Anyway, the point was: both tools have their place, and I don’t see preprocessors going away anytime soon
1 Like
Yeah, simple text replacement, vs. variable properties (so yeah, no media queries because the value there isn’t a CSS property). Most usecases can leverage CSS variables though, there are just those few cases where text replacement is useful. Building out a few applications without Sass, I’ve been surprised at how little I missed it - eg media queries work best applied when specific element x breaks at y size, rather than being a blanket set of sizes (s/m/l, mobile/tablet/etc)
1 Like
Although I haven’t been in the industry for very long, I’ve found preprocessors to be very common, specifically SCSS. Like DanCouper pointed out, variables and modules are really handy features.
I do feel that SCSS has a lot to offer beyond these though. The nested structure allows for very nice syntax and also a convenient way for devs to effectively scope their styles to certain elements when working on a big project. Mixins can also be handy, and I am a big fan of the & operator that gives access to the parent element. For example:
// CSS
.button {
color: red;
}
.button:hover {
color: blue;
}
// SCSS
.button {
color: red;
&:hover {
color: blue;
}
}
SCSS also supports loops and conditionals, although I feel like the cascading nature of CSS makes these unnecessary most of the time.
If you haven’t found it already, most of what you need to know can be found here
1 Like