Don’t use CSS frameworks with your custom WordPress theme

This is mostly a matter of speed, and then to a lesser degree (utility).

I’ve been asked, “Hey Johnny, do you use CSS frameworks? Which ones do you like?”

My answer is NO. I hate the idea of them (and therefore don’t use them).

Reason #1 – too much bloat

Too much junk! Argh. You don’t need all that crap. 12-column layouts going to the right, then again to the left. Declarations for all kinds of icons and warning text and flags and other crap you’ll never use. Boxes and shadows, and spacers, and nav, and all kinds of junk.

Here, see for yourself:

1. Click this link, it’s a demo product page “showcasing” the Bootstrap CSS framework.
2. Check out the CSS loaded on that page. That bootstrap
3. Now copy-paste that URL over to the UnusedCSS site.
4. Run it and see what you get.

That’s right…78% waste on their main stylesheet. You can even test my site (https://wpjohnny.com) and see what you get. It should only be 50% unused styles (actually less if minified) and keep in mind my stylesheet is much smaller to begin with…so my waste is only like 10% compared to theirs.

The bloat exists because CSS frameworks are written to fit everyone. (Which is BS.) Style it yourself, and put only what you need. Heck, you can even start with bootstrap and then delete from it what you don’t need.

I think it’s much better to just do it scratch. It’s not that hard (I think it’s fun). You got text, layouts, boxes, nav, and styling for those elements. Then comes the responsive breakpoints which only have to adjust some of them.

If you really need boilerplate or low-level CSS stuff…maybe try PureCSS or TailwindCSS.

Ultimately, I think they’re not necessary. Your custom theme likely won’t be accounting for 20 page layout variations like those mass-produced theme houses. And IMO…the more customized and busy your theme will be, the more bloated the CSS will be; because that only means there’s that much more than you won’t use and will be writing on top of that framework.

Reason #2 – learning curve

If all you ever do is work on one framework and you do the same type of work over and over, it’s fine. But if you have a ton of different clients, it’s hard as heck to relearn different class names. Yeah, they all try to be more intuitive than the next CSS framework and that’s what makes it hard to remember. I literally can’t remember any framework or class labelling system unless it’s my own.

Reason #3 – generic design

You guys get a bonus reason! I do think it’s true that sites built off the same framework tend to have a generic predictable look. They feel the same, they behave the same. The way they frame content in the browser is the same. It’s like putting a different cloth over the same table. Or buying your Ikea chair in another color.

And sure, people think if you change the colors, you change the design but I disagree. How things are spaced are more of the design to me than the colors itself.