[switz]

I've found a lot of success abusing a styled-system Box (+ Flex/Grid) component. It's like a more mature, flexible tailwind that allows complex integrations and much more dynamic styling, not to mention extremely simple media query adjustments.

I know it's not the right system for everyone, but it's the best styling/layout framework I've ever used. You can have it span as much functionality or as little as you want. In my experience sticking to largely layout based styles is the right move, while occasionally mixing in some slight design-based styling as needed.

    <Box
      px={4} // padding left & right
      width={['95%', '80%', 320]} // correlates to my media query grid
    >
      <Card ... />
    </Box>

or

    <Flex gap={4} flexDirection="column">
      <Card ... />
      <Card ... />
    </Flex>

or

    <Grid
      gridTemplateColumns="1fr 1fr 320px"
      gridGap={4}
    >
      <Card ... />
      <Card ... />
      <Sidebar ... />
    </Flex>

I can put together nearly any layout I want without ever touching styled-components, raw css/sass, or augmented classNames (ew?). If I need to do something complex, falling back to a normal styled-component is trivial enough. Plus every layout is in your face and immediately visible; no paging and scrolling around files to figure out what this class or custom styled-component does.

The only downside is that if you don't organize your layouts effectively and break up your react components, you can end up with Box overloads or abuse, but ultimately its up to the developer or team member to figure out that balance. It hasn't been too much a problem for me.

[dmt0]

I also like styled-system a lot. It's too sad that it was essentially abandoned. Theme-UI seems like a replacement that most people are moving to, but I doubt that it will be maintained for years to come either.