This content originally appeared on Go Make Things and was authored by Go Make Things
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
@extendwith 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).
🎉 Preorder Getting Sh!t Done today and get 40% off! Be more productive, get more done, and feel more in-control of your work and life. Click here to learn more.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2024-08-05T14:30:00+00:00) Bye bye build steps. Retrieved from https://www.scien.cx/2024/08/05/bye-bye-build-steps/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.