[Go Make Things] Bye bye build steps

By rahmat hidayat

Tuesday, August 6, 2024

​ I'm removing all build steps from all of my websites. I'm just so damn sick of having to install NPM scripts and run CLI commands every time I want to update my CSS or JavaScript. Today, I ripped out Sass in favor of 100 percent vanilla CSS. I convert all Sass variables to CSS custom properties. I unnested my CSS (it's supported natively, but not broadly enough for production use). I removed all instances of @extend with better written CSS (typically just grouping some declarations together). Anticipating some questions I may get… How do you keep your files modular? I use Hugo, a static site generator, to build my whole site. I created a list of CSS files as part of my config file. When Hugo runs, it reads each CSS file in the list and inlines it into the head of my HTML. I could have also loaded them as external files, but my CSS is small enough that inlining them is better for performance. What about minifying your CSS? I stopped caring. My server gzips my website automatically. The average webpage on my site, including all of the inlined CSS, all of the inlined JavaScript, and all of the HTML, weights about 12kb gzipped. That's a single HTTP request, in most cases. Minifying my CSS reduces the post-gzip size by just 2kb. The benefit of doing it isn't worth the cost and annoyance of an extra build step, in this particular situation. And as a side benefit, my CSS is much easier to read, debug, and learn from! What about ${Sass feature that doesn't exist in vanilla CSS}? I used Sass for very little… Combining modular CSS files. Minifying my CSS. Variables. Nesting. I've lost just one of those things (and will get it back in the future when native browsers have better support) in exchange for a much less cumbersome authoring process. I don't use Sass power-user features like mixins, generator functions, and so on, so I've lost virtually nothing. What's next? I'll be dropping rollup for my JavaScript in the near future as well, and will then officially be build-step free (except for Hugo, of course). Cheers, Chris ​ Want to share this with others or read it later? View it in a browser.​ ​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+