Menu

Recap: Live Debate: CSS Preprocessors, Useful Front-end Tools?

CSS Preprocessors are tools that allow front-end web developers to write CSS (the language for styling web pages) using variables and other logic that programming languages use. Many contemporary developers use them in every project and swear by their usefulness, while others are less enthusiastic.

While there’s little argument that tools like Sass, LESS, Stylus (and others) allow for things that plain CSS does not, there is room for debate as to whether those things are good and useful.

Pro-Preprocessors (Vince Speelman)

It won’t make you a better developer

saves time

saves effort

saves space

it’s fun

complexity

writing good / big css is complex

output remains complex

source is simplified

files are modular and digestible

patterns can be taught to devs of any calibre

DRY

may or may not complicate workflow

allows you to do more if you want to

extensions

math: I hate it

grids (singularity grid system)

vertical rhythm

modular scale

thinking: I don’t want to waste it

color-schemer

sassy buttons

big: huge helpers

toolkit

style guide

maintainability

fast changes

rhythm

fonts

color

modularity

break up files

separate concerns

The case against preprocessors (Brad Czerniak)

The dependencies, syntax, and features-by-keyword of preprocessors all necessarily add complexity rather than reduce it

Sass and other preprocessors have features that make bad practices look attractive and easy-to-do, and the ugly result isn’t something you’ll necessarily look at

Convenience features of Compass and other libraries are a poor substitute for knowing what the CSS is actually doing

While some tasks are quicker with variables, setting them up will always (always always always lol) be touching n+1 more places than doing it the regular CSS way