[natural219]

Blurring the line between attributes/react props and CSS classes seems abhorrent to me, but just my two cents

[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.

[franciscop]

Sure in this "extreme" I'll agree, it was just an experiment after all (I do think both the short-hand classes and attributes look wrong). Do you think the same about either of these?

    <Button color="red">Hello</Button>
    <Button red>Hello</Button>

[bcrosby95]

What does red apply to? The button color? The text color? Both (sounds useless)?

If you told me a button were red, I would assume the button is red and any decoration on it (e.g. text) isn't. Not sure if that's what happens here.

[natural219]

I dislike both of these :). Just leave the styling layer to itself.

[qudat]

With props you get auto complete which is fantastic for this type of styling work. I’m constantly going to the tailwind website to remember their “DSL” of class names. Autocomplete would dramatically help here.

[aniforprez]

I know it's not actually a great solution but personally I've had no problems with remebering their DSL because I use the official Tailwind extension for VSCode which also uses your config file to give you autocompletion

[mgerullis]

I feel the exact same way