I’ve become pretty fed up with using build tools for small web projects. So I’m attempting to build a WordPress theme with no build tool using only “vanilla” CSS and JS. Here’s some initial thoughts I’ve had after getting started.
What are you doing and why?
I’m attempting to build a new custom theme for my own blog (yes, this one you are reading), and I’m doing it with no npm, grunt, gulp, parcel.js, or anything. It’s zero config because there’s nothing to configure.
I’m starting with the _s (“Underscores“) starter theme, just to get me off the starting blocks with something, but with the “SASSify” option turned off.
I’m actually basing it on my own fork of Underscores that I’ve called oiko_s – this previously had a simple webpack setup added with SASS, Babel transpilation, LiveReload and so on.
But actually, as I mention in my post about my silly SUCSS idea, I’m wondering if modern CSS and JS that now has good browser support (CSS variables, HTTP2, ES6, etc) allows us to write good, clean front-end code for small projects with no build process at all.
What have you found so far?
Well, I’m PROBABLY figuring out why people build frameworks. A few things have come up, even in the very early days of working like this, that make me think it won’t work. But I also have some optimism that I can make this work.
A large, single CSS file is hard to work with
I should really have seen this coming, but Underscores without SASS has one big CSS file and this is hard to work with. It has sections and a table of contents, but it feels like it needs to be properly broken down OR that some conventions or editor/IDE tool is needed to help efficiently navigate it.
I’ve also considered that HTTP2 (you’re all using HTTPS and HTTP2, right?) is much more efficient at downloading lots of small files, so maybe I can just break it up into lots of smaller files and use a loop in my PHP to inject them into the HTML? I could even defer loading of non-critical CSS more easily this way. Hmm…
Live-reloaders are nice
Yeah, I’m missing this. I think I can do it using BrowserSync proxying or something that I can run from npm globally, rather than having it local. There will be a way. But I’m without it for now.
Internet Explorer
Yes, I would really like to support IE11 if I can. There are polyfills of sorts for some things I will probably use, but without them the site will NOT look right. CSS variables in particular are an issue.
And I find myself wondering if I should but a notice up saying “You’re not getting the best experience in IE” or something. Don’t people rally against this? Or is this an acceptable kind of notice to display these days, especially if you’re working WITH modern web standards, not against them.
Forging ahead
So, I’ve made a start, and I’m happy with how it is. There are issues to sort out and things need to be done to improve the workflow. But I’m happy with the direction.
Watch this space for more!