Musings on CSS Preprocessors

As a mostly backend developer getting more and more exposure to frontend, I’ve touched a fair amount of CSS of late. Being a lazy person, I naturally gravitated towards the joy that is a CSS preprocessor. Mostly because:

Don’t Repeat Yourself. Having to say things like

#diva .divb { ... }
#diva .divb span.foo a { ... }
#diva .divb > .divc a,
#diva .divb > .divc a:visited { ... }

while I could

#diva {
    .divb {
        span.foo a { ... }
        > .divc a {
            &:visited { ... }
        }
    }
}

is just delightful.

It helps me think about the structure I am styling. When I have a nested DOM structure, I can nest the CSS statements in a similar fashion and it makes it easier to map it mentally.

It creates readable CSS. When I look at a concise nested LESS file, I can quickly see what I’ve styled, what the resembling DOM (mostly) looks like, and continue from there. It also prevents me from what I sometimes feel as ‘dumping on’ more rules.

Now, I’m pretty terrible at CSS, honestly, and I’ve been trying to debate myself on how I could write better unprocessed CSS.

Select by class, not by structure. Having single-use classes allows me to have top-level selectors and should greatly reduce the amount of styling I need to write. multi-use classes would be appended for generic styling effects.

Don’t use IDs for component / subject, but a single-use class. This one is difficult. I’m very used to thinking in terms of “#main-box is the only existing main-box on the page”. When I read “.main-box”, part of me suspects that there might be more. I’m still trying to figure out where using IDs in the DOM is a good practice.

Preprocessors compile to horrid CSS. Fair point. Debugging generated CSS can be a pain. Source maps alleviate this, but that’s fighting a symptom.

Not using a preprocessor makes you think better about what you’re styling. Also a fair point. Surely if I need to override things a lot and write nested specific rules to get what I want, I’m probably not doing The Right Thing.

Anyways, this was basically a braindump. I’d love to hear anything I’ve missed - writing sound plain CSS is a skill I would very much like to have.

Cheers.

the other nice thing about using preprocessor especially when using scss, sass, less or whatever you choose to use. is being able to split up your code, and just import it into your main style sheet.

Other than that another good way to learn to CSS is try out using SMACSS.

SMACSS isn’t a framework, but rather a guide to help you document or structure your website consistently using CSS.

1 Like

Agreed, importing is another great feature. It also makes it easier to compartmentalise things. Perhaps doesn’t go hand in hand with the cascading part of CSS, though.

that maybe for some cases, but it really depends on how you structure your website with your CSS files.

This is why I use SMACSS(with and without a precompressor), plus it’s a better way to work with a team.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.