4 ms·
I'm guilty of implementing <SideBarItem /> as export { SideBarItem = (<div class="flex-1 bg-blue font-bold, text-md d:none"></div>) } Is that a bad
by Jenk 4y ago
I'm guilty of implementing
<SideBarItem />
as
export { SideBarItem = (<div class="flex-1 bg-blue font-bold, text-md d:none"></div>) }
Is that a bad thing? (Genuinely asking for opinions)
E: added clarity
- deleted 4y ago[deleted]
- nerdywordy 4y agoNo, it's not a bad thing. It's how (nearly) everyone using React (or any frontend framework) + Tailwind will structure their code. And I'm not sure the author is arguing against Tailwind's utility in static styling scenarios. I think the article's author would argue that once you move beyond static classes that Tailwind's class building becomes messy. So <SideBarItem padding={4} active={true} /> would be cleaner in the authors mind if the exposed props get applied by some other tooling better suited for dynamic styling instead of simple string manipulation. There is some merit to that argument. Building the class string can be cumbersome in some scenarios. But Tailwind "clicks" for me where other solutions do not. So I do it anyways.
- nextaccountic 4y agoIt's not a bad thing. Or if it's a bad thing, I'm guilty too
- zdragnar 4y agoIt lends itself to copy-pasting everywhere. Styles end up getting over-applied. Markup becomes 3x harder to scan because the signal: noise ratio is horribly skewed. YMMV; I prefer styled/ emotion-styled for primary, reusable blocks, and tailwind for one-off exceptions like a bit of extra margin.
- digitalsankhara 4y agoIf I were to look at your code (or revisiting my own after some time) I'd know what <SideBarItem /> was likely for straight away. But I would need to construct the likely intent of the <div> version in my mind. Of course you could abstract those classes into one that provides semantics; <div class="side-bar-item"></div>
- Jenk 4y agoI meant SideBarItem's implementation is the tailwind div, but is referenced as SideBarItem like any other React component, not that the tailwind div is pasted all over. :)
- digitalsankhara 4y agoHa! Understood now.
- sally_glance 4y agoIMO it's not a bad thing at all unless you have that exact div snippet copy-pasted to a thousand other files.
- Jenk 4y agoI meant SideBarItem's implementation is the tailwind div, but is referenced as SideBarItem like any other React component, not that the tailwind div is pasted all over. :)