Comment by captainmuon | Hacker News Reader

Comment by captainmuon | Hacker News Reader

I feel like an old man yelling at clouds, but I actually like CSS, with classes, specifity, and the cascade.

Maybe the difference is that other people build apps with lots of components. When I write HTML I mostly build web pages - a lot of text, some images, and maybe a menu.

I need to be able to tweak properties among a lot of different elements at the same time. E.g. change the font face on all elements in the main area, change the color of all links that are not special links, rotate all titles and underline them, and so on. It's an iterative approach, as I evolve the design in HTML (I don't have a designer team that hands me a psd I just have to copy). To do this with Tailwind, you'd have to use components, and you'd have to add another layer of abstraction to affect the right components together.

And I know nobody really uses CSS Zen Garden style themes - but it is great to be able to take a HTML snippet and use it in another project with minimal changes and a different CSS design.

CSS has shortcomings - it's missing a way to "include", it could have more complex selectors, it can get unwieldy in larger projects - but it is also does a couple of things really well.

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.

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

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.

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.

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

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.

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

The irony is, you're the niche case, and from now on, will always be.

Almost everything on the web is basically an application, or runs on an app. Anything based on wordpress is an app. On Wix, or Rails, or whatever. They're all apps.

Almost no-one has static websites.

So your use case, which CSS might actually kinda fit, is the niche that CSS should actually ignore, or at least treat as a 2nd class citizen.

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.

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.

Wikipedia is a web application. Your example is about an app.

Anything that uses dynamic pages to generate content, like wikipedia, is a web application and benefits from more structured, class based, CSS.

99% of the web is run on web applications. Whether it be Wordpress, Wikipedia, a news site CMS, whatever, they're all applications.

Reply on news.ycombinator.com