Tag: css

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