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”.
4 Comments
Nimgimli
May 19, 2025 - 11:13 amPossible word of warning: Tailwind is more like a toolkit than a framework and, from what I’ve seen and heard anyway (I’ve never actually diven — dived? — into it myself), takes a lot of setup in creating all the things you’ll need to use.
Giving everything a class isn’t so bad if you’re the only one working on a project. The big issue is when someone comes along after you and wants a new thing and doesn’t like the style you’ve created so they make a new one, possibly over-riding part of what you’ve done. Then another person does the same, and pretty soon you have a huge pile of styles over-riding/over-writing each other and it becomes a nightmare.
At work we use a theme called Divi (NOT my decision) that has a shit-ton of styles riddled with !important tags and like 60% of my time is spent trying to figure out how to work around it’s weirdness. Hate it!
Scopique
May 20, 2025 - 6:17 amFrom what I can see, Tailwind provides pre-made classes that are — ideally — granular enough to provide coverage for all kinds of options. And it has some features that short-cut some of the newer and possibly less well-understood/less well-documented CSS offerings like `has`. That MIGHT be what I’m after; if it’s closer to programming than styling, I might “get” it more.
I feel re: Divi, tho. I tried it out on a site a few years ago because I liked the idea of modularity, but it spun wildly out of control and nothing looked good and I figured if I had to get into the code to “fix it” then it kind of failed at it’s purpose of making it so I didn’t have to do that.
Kevin
May 19, 2025 - 11:27 amI use sematic-ui (the react version more specifically) on tempusgameit and it’s fine. I’m kinda in the same boat. I generally dislike the sameness to other sides when adopting a framework (how many bootstrap or material sites have we seen?), but I’m not a designer.
I would generally favor a component design, with class styles, and inline styles as a final, rarely used override. But that’s just personal preference, as I like to have a centralized definition which makes construction and update a bit more focused.
Scopique
May 20, 2025 - 6:21 amI really do like the idea of styled components because it’s all compartmentalized, and I almost never have to think about how it’ll look — assuming I’ve done it properly. Sometimes aligning elements for the first time gets wonky and fine tuning has to happen, but I’ve been pleased with the workflow so far.
One of my biggest issues is always broader layouts. I use `flex` probably way more than I should — less for responsiveness and more because it can handle putting elements side-by-side with alignment and justifications I want. I’ll also cop to relying on That Scourge `table` now and then when I should use `grid`, mainly because I know how to use `table`. Any time I have to rely on `grid` I’m back at CSS Tricks cheat-sheet.
Comments are closed.