Hacker News Reader

Comment by iamben | Hacker News Reader

I love CSS, I'm relatively good at it. Didn't enjoy Tailwind until I really did. Working on a frontend project with other people Tailwind is fantastic. Everyone can see and understand what I've done and there's no trying to understand other people's style sheets, or see what they've done or anything else (especially with the VSCode plugin that orders the Tailwind classes properly). Sure, pure CSS does some bits better and I'll still use that for projects that are 'just me'. But it's great knowing that the next dev we hire can pick it up and go from day one.

As for the mentioned nested selectors (which I'm a huge fan of), in the next version I'd like to see grouped nested selectors. So instead of:

  [&>div]:mt-4 [&>div]:bg-white [&>div]:px-2

You could do something like:

  [&>div]:(mt-4 bg-white px-2)

Which I think would improve readability and significantly cut down on class bloat.

View on HN

> But it's great knowing that the next dev we hire can pick it up and go from day one.

Presumably the next dev you will hire will be a frontend engineer? CSS is a core competency for a frontend engineer, whereas Tailwind is an add-on. If I were choosing a frontend engineer for my team, I would make sure there core competencies are up to snuff.

Presumably, yes. And assuming they have Tailwind skills as a 'add-on' I'd argue it's easier for them to understand and get going straight away with:

  class="rounded shadow p-4 pb-1 bg-white"

than:

  class="blog__rounded-box blog__rounded-box--padding-fix"

But I get your point. It's the same as the article, right? You still need to understand CSS to use Tailwind, so why bother? I guess each to their own. Maybe we'll regret this in a few years, but it works very well and feels much more maintainable for us now. I've certainly worked on enough projects (and, mercy!) had to pick up enough projects where the 'vanilla' CSS was absolute spaghetti!

Reading your Tailwind example, I must confess that I have no idea what "p-4" or "pb-1" are; or what the border-radius will be for the "rounded" class, or what color the "white" will be in bg-white.

> I've certainly worked on enough projects (and, mercy!) had to pick up enough projects where the 'vanilla' CSS was absolute spaghetti!

And I am very guilty of having written such spaghetti in my first big project :-) But authoring FE code as components, and encapsulating styles inside of components (with either CSS modules, or scoped styles) has helped tremendously. Perhaps web components will save us, by allowing full style encapsulation inside the shadow DOM, thus eliminating CSS-at-scale headaches altogether.

> I must confess that I have no idea what "p-4" or "pb-1" are ...

Of course! That's the Tailwind add-on, right? I guess the key being you can move between projects that use Tailwind and know it's a rem unit of padding all round and .25rem padding at the bottom. And when you come back to it 3 months later, you still know.

> And I am very guilty of having written such spaghetti in my first big project :-)

Oh, me too and not just the first! It's amazing how quickly things can turn to pasta when you're rushing to hit deadlines! :-/ But I think you're right, with good practice everything gets a bit more maintainable. Let's hope we get there eventually!

I imagine you’d have to use underscores for spaces, otherwise you actually have 3 different classes there.

You're totally right. You got my point though!

Reply on news.ycombinator.com