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

One thought on “Recap: Live Debate: CSS Preprocessors, Useful Front-end Tools?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s