3 ms·
Ah I'm not a huge fan of this: <Menu.Items className="absolute mt-1 right-0"> I'd prefer it to be like this: <Menu.Items absolute mt-1 right-0> I di
by franciscop 6y ago
Ah I'm not a huge fan of this:
<Menu.Items className="absolute mt-1 right-0">
I'd prefer it to be like this:
<Menu.Items absolute mt-1 right-0>
I did some experimenting (I'm the owner of `react-tailwind`, please reach out if you want it!) and it's definitely possible to do that; but it does imply components are purely visual, which I'm not sure it's the way they want to go. It's also not possible to use the colon like `md:...`, but you can do `md="..."` instead, which is a good approximation IMHO
- CraftThatBlock 6y agoA big issue I see with this is that having custom classes (the whole extensibility point), at least in TypeScript (without re-declaring them).
- franciscop 6y agoIf typescript is an issue don't use it ;)
- jeswin 6y agoGiving up the myriad benefits of type-safe code over this relatively minor and entirely subjective coding style preference will be a poor engineering decision.
- qudat 6y agoI investigated figuring this part out. Theoretically you could build a postcss plugin that generates the proper typescript types. It would be difficult.
- natural219 6y agoBlurring the line between attributes/react props and CSS classes seems abhorrent to me, but just my two cents
- mgerullis 6y agoI feel the exact same way
- franciscop 6y agoSure 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>
- natural219 6y agoI dislike both of these :). Just leave the styling layer to itself.
- bcrosby95 6y agoWhat 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.
- switz 6y agoI'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.
- qudat 6y agoi’d prefer `<Menu.Items absolute mt={1} right={0}>`