Whenever I build a web app, I seem to spend more time dealing with CSS than doing anything else, and I often feel mildly frustrated by this. I already know the ins and outs of vanilla Django fairly well, and most of the backend and database logic comes naturally to me. It’s not too hard to come up with the function or script I need, or to figure out what database query I need in order to make things happen. Also, by nature, I’m someone who doesn’t really care that much about how things look; I’m very practical, so styling a website can sometimes feel like a chore. It almost feels like one shouldn’t have to spend so much effort making a site look nice when what’s most important is its content and functionality. In the end, though, I understand this is a subjective and somewhat arbitrary feeling.

All of this is compounded by the fact that I’m a bit of a perfectionist. I’m paranoid about releasing anything that’s sub-par in quality, so I tend to put things off—and often never finish them at all. I frequently struggle with making CSS do what I want, and I definitely think it’s the part of web development that I’m least proficient in. I suspect I never learned CSS the right way: I only ever did the FreeCodeCamp CSS modules, and I most likely rushed through them because I was more interested in diving deep into JavaScript. Once I got to the Bootstrap section of the courses, I thought it was great because it allowed me to make webpages look decent enough without having to think much about CSS. All I had to do was copy and paste the CDN, add some simple classes to the HTML elements, and Bootstrap would handle the CSS under the hood.

Obviously, this line of thinking doesn’t really work out. While it’s true that Bootstrap is a big help, especially when you’re just starting out, it introduces its own set of problems. And by using the CDN, you’re unwittingly importing a large number of styles that are implicit in the Bootstrap classes—styles that an inexperienced user might not necessarily expect. Elements in Bootstrap then often interact unexpectedly with other elements or are difficult to customize. I think this is one of the main reasons why Bootstrap has somewhat fallen out of favor. It’s not just that Bootstrap makes sites look “too Bootstrappy” (after all, there are many ways to customize the look of Bootstrap, for example check out Bootswatch), but also that it’s often used as a way to avoid dealing with CSS. In reality, there’s no way to avoid CSS if you're doing web development. Ultimately, web development—like all software development—consists of imagining something and then giving the computer instructions on how to make that vision a reality. Bootstrap can’t truly do that for you (it’s designed to make sites look good enough, after all), while CSS can. So, you have to give the CSS gods their due, unfortunately.

Again, I want to be clear that this isn’t a Bootstrap hate post. I like Bootstrap and think it does its job well. It’s just that I used it the wrong way—as a replacement for actually knowing CSS—and from browsing StackOverflow and Reddit, I think a lot of people do the same.

(Call me a philistine, but I wouldn't have too much of a problem if most every button on the internet looked like this)

So yeah, I used Bootstrap almost exclusively for a few years and had some frustrating experiences trying to make relatively simple things work right. My component styles were (and to some extent still are) a mess of classes overriding each other, so, as you can imagine, I used the !important flag very liberally. It works, though, and I’ve never really had to give up on a style—I’ve always gotten it to work eventually, sometimes after much pain. My portfolio and the main web app I’m developing and maintaining right now use a mix of Bootstrap and raw CSS, and in true Bootstrap fashion, I think they look good enough.

Then, last year, I started learning Tailwind (for EMPLOYMENT PURPOSES, of course), and my conclusion so far is that, in terms of its styling philosophy, it’s an upgrade in every way—except perhaps ease of use and the slightly steeper learning curve compared to Bootstrap. It certainly requires one to think more about what they want to do, but that’s a good thing because it forces you to take CSS seriously, even if it’s within the abstractions of utility classes.

At first, using NPM to compile your styles into raw CSS can feel awkward, but eventually, you get into the groove of things. I actually think the process of using the CDN during development and then compiling into pure CSS—getting rid of the CDN and purging all the unused styles—makes a lot of sense. The Tailwind ecosystem also has some great component libraries like DaisyUI and Flowbite, and I think the DaisyUI components, in particular, look neat and modern, so I used them to build this very website!

To end on a positive note, I want to share that I used to think of myself as completely inept when it came to anything related to visual arts or graphic design. I can’t draw a dog, a flower, or a soccer ball to save my life, and the only graphics editor I’ve ever used is MS Paint. But, I think working with website styling has given me, for the first time, a little bit of confidence in this area. Styling page after page, app after app, from scratch really forces you to learn about colors, fonts, contrasts, visual balance, and other elements, at least subconsciously. I would never release a web app that I didn’t think looked at least average, and I think most of my work nowadays looks at least solidly average.

(This is how I feel when my websites look average)

In upcoming entries, I want to write about the design choices I made for the web apps I’ve developed, focusing on Django architecture, CSS frameworks, JavaScript libraries, as well as containerization and deployment. I may then dive deeper into the pros and cons of Tailwind, Bootstrap, and pure CSS based on my experiences.