Comment by skydhash | Hacker News Reader

Comment by skydhash | Hacker News Reader

Parent Full thread

Why the hyperbolic about 100s of components? Because if that exists somewhere, then it's just plain bad design to me.

Let's say you writing templates for a website and you have a partial named "main-navbar", it has a search input field that looks like the other input, but needs some alteration. Are you going to name all these alteration like "margin-x-2px", "font-small". Or just add a new style block with ".main-navbar .search-input" as the selector.

> you're basically taking the worst part of CSS (hunting down the meaning of a selector) and duplicating it for every component.

Why are you hunting it down? If I need to find the styles that are applied to an element, I just open the web inspector. More often than not, from bottom to top, it's the reset style, the component style, the variant style, and the styles derived from its relation with its parent and siblings.

With tailwind

  <div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
    <img class="size-12 shrink-0" src="/img/logo.svg" alt="ChitChat Logo" />
    <div>
      <div class="text-xl font-medium text-black dark:text-white">ChitChat</div>
      <p class="text-gray-500 dark:text-gray-400">You have a new message!</p>
    </div>
  </div>

With "traditional css"

  <div class="alert">
    <img class="alert-icon" src="/img/logo.svg" alt="ChitChat Logo" />
    <div>
      <div class="alert-title">ChitChat</div>
      <p class="alert-message">You have a new message!</p>
    </div>
  </div>

You don't need the classes on the alert sub-elements:

  <div class="alert">
    <img src="/img/logo.svg" alt="ChitChat Logo" />
    <div>
      <h2>ChitChat</h2>
      <p>You have a new message!</p>
    </div>
  </div>

Then the CSS is just:

  .alert {...}
  .alert img {...}
  .alert h2  {...}
  .alert p   {...}

You can probably also get rid of the nested div by using flex, floats, or margins.

I would add, that usually also I would not hunt things down, because I put styling for a navigation into a stylesheet file called "navigation.css". Not much hunting to do there. Sounds crazy, but actually works.

every page in our app is a "component" which could have many sub components, some reused. i think it's actually very common in large scale apps so maybe we're not even starting on the same foot.

would you not consider opening the web inspector "hunting down" when i can just understand the full thing just by looking at the element itself? to your example, let's say now you want to put your search bar next to another item, but that item requires that there be 4rem right margin. Then you put your search bar next to another item in another component that requires 8rem top margin. this starts breaking down at scale. in the past we would just inline the margin value. eventually this moved to basic utility classes which evolved into tailwind.

and with your code, you've just proved my point. i find tailwind overly verbose (necessary evil), but honestly i don't even need to open the "inspector" to understand how this will look. you can give me that 12 months from now and i can understand exactly what it is in 10 seconds. with "alert" i have to referencing something else. and this is just a handful of lines, imagine if your component is larger than that. it's also a bad example because i will just eventually roll the styles for "alert" into its own class if it makes sense. get the best of both worlds.

again, i challenge you to just consider that a lot of other people as smart as you have thought through these issues and made the according trade-offs. the example you're giving is just way too simplistic and pretty much like every example someone gives in these threads.

Reply on news.ycombinator.com