3 ms·
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
by dsego 2y ago
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>
- iammrpayments 2y agoI 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