Hacker News Reader

Comment by kingofthehill98 | Hacker News Reader

I'll take this over grepping hundreds CSS files trying to find that one specific class and hoping it's not used anywhere else anyday of the week.

View on HN

Yes. The best explanation of Tailwind is when Adam describes it as “an API for your design system.”

The biggest problem with CSS when trying to maintain a design system is the same problems you run into any time you use inheritance in programming.

Inheritance has its place, but making your CSS composable the way Tailwind does makes it practical to actually adhere to a design system.

If you’re more worried about the purity of your HTML, then Tailwind is not for you.

If you have to use grep to find a CSS class, you're doing it very wrong. Not having any discipline or organizational skills leads to needing grep to find CSS, it is not something inherent to CSS itself.

In my front end, for example, I have registration-page.jsx and registration-page.less, and there is really zero mystery where the styles are for the registration-page. It uses components like password-input.jsx, and guess what? the CSS for that is in password-input.less. There's no grepping, there's no difficulty finding the classes that are specified. Everything is very orderly and easy to find.

Even if your styles aren't colocated you can use sourcemapping alongside established patterns on how to structure out your scss/less. Just inspect the element and click on the filename next to your selector and it opens in your editor.

And what about projects that don’t exist in a paradigm where css can be collocated with templates/components? Legacy projects? Large contributor teams?

Can you not keep your files in some sort of order?

On my pet projects? Absolutely.

On work projects with 5 years of contributions wrote by 50+ collaborators and close deadlines? Hardly think so.

grep -R .class-name ./assets/css/wherever

Or use your IDE's project search? In vscode you can just ctrl-click on the class and it should find it?

IT IS NOT DIFFICULT

Until you discover that one feature in production that is built with dynamically concatenated class names and the SCSS file is deeply nested to hell and back so your search didn’t find `card__${cardType}__inner—-${userPrefColor}-background`

Ask me how I know!

That doesn't sound like something any tooling should be supporting.

I've done that before, and everyone who does regrets it. It should be a linting error, not something we need to re-write searching to support.

What do you honestly expect someone to reply to this comment?

Yes, and?

Developers tend to do bad things sometimes. It happens. That’s the reality.

Sourcemaps and the browser inspector will tell you exactly where the styling for that element is coming from

Reply on news.ycombinator.com