CSS Frameworks: Better or Differently Terrible

One of the things I hate about my job (and I say that in reference to both my day job and my hobby) is Doing Design. For me, good design is like obscenity: I can’t explain it but I know it when I see it. The problem is that I don’t work in an environment where I have access to a dedicated designer and when working on my own projects, I really don’t have access to a dedicated designer. Everything ends up in my bucket, from making things work, to how things look. I have become pretty good at making things work, but not so much when it comes to making things look good.

That puts me at odds with CSS. Despite both of our ages, CSS and I have never gotten acquainted beyond the point where we recognize each other’s face at parties. I know a fair amount of the basics of CSS, like fonts, colors, and borders and though I have arrived amazingly late to the flex and grid parties, I have arrived. I am amazed by the visual gymnastics I see people perform when they really know how to harness the power of CSS though as cool as those examples are, I’m not looking to do amazing things for the sake of doing amazing things; I just want to be able to create decent designs without having to spend more than half my time designing.

The thing is this: I struggle with how CSS is meant to be deployed. HTML is straightforward because <div> has a use, <a> has a use, and <img> has a use, but on a page each <div> could have it’s own style needs. Sometimes, those needs are only for those cases and never anywhere else on the site. In any case, I have a few options when it comes to applying a style:

• Inline styles. Apply CSS directly to that element where it lives, though this is generally considered a no-no for Future Me’s sanity.
• CSS Classes/Selectors. Putting definitions in a central CSS/SCSS file and then using the class/className in the HTML element. This can quickly get out of hand with a lot of bespoke style needs, though.
• Styled Components. There are libraries which allow for the creation of named, styled elements which are deployed like normal HTML. These are good for reusability, but not so much for everyday styling of one-off elements.

There’s a fourth option — the framework solution — that I’m contemplating, but with reservations. In the far past I’ve used packages just as Bootstrap, primarily for layout. Since the introduction of Bootstrap there have been a whole lot of other pre-designed visual style packages like Tailwind or Material that allow designers to deploy standardized CSS to take care of their layout and visual needs and to create a unified look and feel not just within an app, but across apps (mainly relevant to mobile apps in an ecosystem, which is not part of this specific discussion). The upside to using one of these frameworks is that (theoretically) all of the use cases have been provisioned for. Need a multi-column layout? Done. Need floating labels for forms? Done. Need error highlighting? Guess what? Done! When using a framework the only thing a designer needs to know is what class names are available to them. The downside , of course, is that it’s pretty easy to pinpoint when a site is using a framework because unless a designer bucks the purpose and customizes the crap out of the base, it’s going to make a site look exactly like every other site that uses that framework. Now, I am not so much a style noob that I would advocate to use a framework en toto for front-of-house website. Using a framework on the content management side of a site is less of a sin because it’s the functionality of the app that should take priority. Using a framework for administrative apps seems like a slam dunk.

I’m still not entirely convinced, though, and I don’t know why. I’m so used to “full stack” meaning not just hardware, hosting, data, and development, but style as well, and using a framework for design seems like a cop-out. JuST LeaRN CsS! Yes, that is the logical answer, but that takes time, and as I am more of a “make things work” kind of guy I can’t bring myself to justify spending that time becoming a “make things look good” kind of guy when I could be learning something functional.

So as usual, seeing this all in writing is less of my trying to communicate with you and more for my own therapeutic edification. As my current personal project is focused on the administrative side of the house right now, I’m thinking framework is the way to go. I don’t actually have a front-of-the-house site planned; this is mainly a template onto which I could pin a public facing site, should I ever decide on one I want to create. So now the issue is “which framework to use”.