On: Show HN: LangCSS – An AI Assistant for Tailwind

[_akhe]

True for this isolated example, but careful with this practice because that requires `<a />` to be the immediate descendant of `.link-list`, where className is more flexible.

Consider a simple HTML change like wrapping links in a list item, or occasionally using a <button /> to handle click events, it would break the styles if you used child selectors:

  <ul class="link-list>
    <li><a href="#" /></li>
  </ul>

^ even with this tiny change, your styles are gone. Would have to change it to:

  .link-list > li > a {}

And would have to repeat that for anything else you'd want to support later:

  .link-list > li > a,
  .link-list > li > button {}

etc. Where with a normal className it would just work in all those cases without having to touch CSS again:

  <div class="link-list>
    <a class="transition-link" href="#" />
    <span><a class="transition-link" href="#" /></span>
    <button class="transition-link" />
    <ul class="flyout-menu">
      <li>
        <ul class="sub-menu">
          <li><a class="transition-link" href="#" /></li>
        </ul>
      </li>
    </ul>
  </div>

All those would be styled correctly without having to explicitly list descendant structures in CSS. So it's more flexible just using className and I would only use > for specific situations.