6 ms·
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
by korm 2y ago
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.
- dsego 2y agoWhy 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