Hacker News Reader

Comment by korm | Hacker News Reader

It's a bit like the <center> tag. A codebase that's littered with stuff like "InlineStack" is harder to work with and parse because the resulting div soup still requires extra styling, which is now both markup and CSS.

View on HN

Why is it harder to work with? It makes it immediately obvious what the visual layout is and what the purpose of the component is and a lot of time all you want to do is have a flex on a component and you don't need other CSS to warrant yet another CSS class. It's the same reason why utility CSS was created (eg <div class="flex">). It also saves you from having to come up with a semantic name in your CSS for every wrapper.

Compare the following:

    <Stack gap={2} direction="row">
       <Box>
         <Avatar />
       </Box>
       <Box>
         <Button />
       </Box>
    </Stack>

    -----

    <MyCustomWrapper>
        <InnerChild>
          <Avatar>
        </InnerChild>
        <InnerChild>
           <Button />
        </InnerChild>
     </MyCustomWrapper>

I think this looks way simpler

  <div className=“flex gap-2”>
   <Button/>
   <Avatar/>
  <\div>

Then just apply the box styles using *: selector or directly in the component

Reply on news.ycombinator.com