on ditching css frameworks and preprocessors

alex papadimoulis:

What if I were to tell you...CSS is already a framework for styling HTML, and that by actually taking the time to learn it, one can make significantly less shitty websites that are actually responsive, don’t require a quad-core with 8GB of ram just to render, and that another front-end-developer who isn’t hip on whatever flavor-of-the-month bullshit framework can actually be able to maintain it?

it amused me that the above is actually not too far away from what i tell my clients on css frameworks and preprocessors. for most projects i always felt i can write less and cleaner code that is appropriate for the specific use case. sure, it may take you some more knowledge and a bit longer to get up and running, but you will save time and money in the long run by reducing abstraction, being able to update it easily and avoiding extra cruft. i strongly believe that css frameworks and preprocessors are partly responsible for the slow loading and rendering times of many modern websites. most of my critique is focused around the following issues:

  • they can add a lot of bloat and unused code to your website, which results in a heavier and slower website
  • they promote opinionated thinking around mobile- or desktop-first strategies, structure of your project and force you to think around breakpoints of mobile, tablet and desktop instead of actually focusing on the content and modular building blocks
  • they often add a hard requirement to structure your html layout around css, but css should actually be a layer above html
  • they can make your build process more complex and slow it down massively
  • they force you to adopt styling and naming conventions, even if they don't fit the current use case

cole peters has written an excellent piece on this issue:

Pre-processors like Sass and Less are too abstracted from production CSS; this blinds us to detrimental effects of our actions during development, locks us into vendor-specific syntax and features, and ultimately puts too much distance between the code we write and the code that is delivered to our users. Post-processors like PostCSS and plugins like cssnext offer some forward-looking alternatives to this.

i especially like what the latest css module specifications bring to the table, be it variables, custom media queries, a grid system, color manipulations, custom selectors - all coming soon to a browser near you. as such it definitely makes sense to at least consider ditching existing frameworks and preprocessors and move to a bright future.

Want more ideas like this in your inbox?

My letters are about long-lasting, sustainable change that fundamentally amplify our human capabilities and raise our collective intelligence through generations. Would love to have you on board.