I build apps with lots of components and I still like CSS with classes, specificity, and the cascade :)

What css frameworks (a la bootstrap) are good to go with for that approach? any css framework that doesn't have JS?

I don't really use CSS frameworks personally, I find they tend to complicate things. Though I realize this philosophy may not work for everyone's use-case

Fair, is just that when I see all the css you have to write just to make a button pretty I shudder ;) It's fine I guess if your task is to only write css.

So by components you meant react components not css components?

Yeah, React and other similar component-based frameworks

The thing about writing the CSS to make a button pretty is that you only have to write it once (it's also usually no more than 10 lines), and then you can reuse it as much as you want. So forgoing a framework has some up-front cost, but in the long run it amortizes out and makes things easier to maintain imo.

Now, if I were churning out a new website every week or every month I would not be starting the CSS from scratch each time. I would probably carry around some starter CSS from project to project myself, though this would also be a good case for a framework.

Same here. In personal projects I just "handwrite" css (with stylus). It's simple & modular enough alone. At work we usually use a "framework" (sort of) to make teamwork smoother.

Take a look at Bulma, it's quite simple.

I enjoyed using Primer CSS (Github) recently. Another interesting one is Spectre.css

I think the styles everywhere thing depends somewhat on how you create components.

For example I have used Tailwind with Styled Components so I have isolated CSS for components and interactions, and consistent classes for layout.

It really makes maintenance a dream. When you update a component it is clear what CSS is tethered to it, so you don't accidentally leave unused classes around or tweak classes that are used elsewhere with unknown results. The bigger the app, and the more developers the more this becomes useful.

Of course for personal sites and blogs and projects many tools are overkill. But I have saved so much time, bugs and effort by moving to Styled Components. Tailwind feels like what I previously used bootstrap for.

I can hand write the CSS but I want to be able to quickly switch columns and fonts and alignment in a cross browser, mobile friendly way while writing the HTML on the first pass when working professionally.

Tailwind can do what you're describing via the @apply function.

Just write your CSS selector to target whatever you'd like, then use `@apply tailwind-classes md:other-tailwind-classes` inside the brackets.

This way, it's just a set of shorthand tags that replace the long-form CSS props, but it's still useful for quick design work.

> Just write your CSS selector to target whatever you'd like, then use `@apply tailwind-classes md:other-tailwind-classes` inside the brackets.

I never understood this argument, at this point you are just writing CSS with extra steps and unnecessary abstractions.

Without Tailwind: guess at what the proper class name is, use it where you think it makes sense, eventually find out you got it wrong and have to fix everything.

With Tailwind: defer decisions about assigning classes until you've built enough to see what the proper abstractions are, then just refactor out the repeated utility classes. There's even plugins that will consistently sort your Tailwind classes so that refactoring can be automated by simple search and replace.

Like I said, it's shorthand for writing the whole CSS. How many lines of pure CSS would it take for `md:font-medium`?

The only thing I don't like are recruiters thinking I need to have advertised and demonstrable experience with this

I'd say the vast majority of words online are in documents, not in apps.

Wikipedia is documents, news sites are documents, wordpress blogs (that are not shops etc) are documents. Even in this forum, when threads are locked after some time, they become documents. Even if they are dynamic behind the scenes.

Naturally, if you are writing something like Twitter, Gmail, any SAAS app, ... you need a different approach than when building websites for documentation, essays, news, and so on.

It's all CSS at the browser. Anything a utility CSS library will provide will eventually have to use the same APIs. It'll either be more low level to support more abstractions, or it'll be equally low level to what normal plebes would write.

You're using CSS instead of styling. That's what we're talking about. CSS is a particular styling method (particualrly poor according to a lot of our sensibilities). I've used a fair few, and CSS has to be the most frustrating of them all, even though some had higher learning curves.

No, I’m using CSS because that’s the actual styling API used in the browser. I’m not sure what else you’ve used, but if you’re styling in a browser, you’re using CSS. Even if it’s something that abstracts it or ultimately compiles to it.

Edit: just as whatever tooling you use to build content or dynamic runtime interactions in the browser are ultimately going to be HTML and JavaScript respectively... even if those aren’t the languages you wrote.