search

cynicaloptimist / improved-initiative

Combat tracker for Dungeons and Dragons (D&D) 5th Edition
https://www.patreon.com/improvedinitiative
MIT License
309 stars 108 forks source link

Colocate Component CSS #402

Open cynicaloptimist opened 5 years ago

cynicaloptimist commented 5 years ago

Move LESSCSS associated with individual React components to be located in a .less file adjacent to the single .tsx file that imports it (using some like webpack loading chain). Individual PRs for components are welcome.

ssunday commented 4 years ago

With that organization style in mind, would https://www.styled-components.com make more sense in the long run?

cynicaloptimist commented 4 years ago

I looked at Styled Components a little when researching for this issue, it looks like it introduces some new syntax into the tsx files, which put me off when I first saw it. If you think it would be a good fit for the project feel free to add it!

cynicaloptimist commented 4 years ago

Oh- here's another bigger issue with styled components- I like to make it easy for user scripts (such as stylebot CSS) to run on the page, so I want to have good semantic classNames on most components. Class-based CSS is applied with .less; I guess styled-components would attach the styles directly to the components with a style tag. That makes it easier to omit semantic classNames from a component. Is there a way for styled-components to operate through the className, or do you think that completely defeats the purpose?

cynicaloptimist commented 4 years ago

I spent some time reading the Styled Components docs, seems pretty cool. I guess there's nothing stopping me from leaving semantic classNames on HTML elements if we adopt Styled Components to decoupled from the app's own element styles from their classNames. I'd like to hear your thoughts on this.

ssunday commented 4 years ago

TBH, I'm not a big of styled components/the concept of component styling next to the javascript—I'm pretty vanilla in that I like the SCSS in a structure something like this https://itnext.io/structuring-your-sass-projects-c8d41fa55ed4. However, I've been using styled components in a few projects and it can work fine with the right mindset. I'm just less hot on the co-mingling idea in general...right now...

Yep, you can leave the class names as is with styled components and style them instead of the ones it adds (so porting should be easy). In this case, in my mind, it's more to just clearly have the css/tsx together in file. Which'll be easier to parse directory/structure wise than having css/tsx files next to each other, IMO. And no webpack/build pipeline changes.

ssunday commented 4 years ago

In my optimistic mind right now, I think switching some of them could be easy, granted setup + theme build out goes fine.

cynicaloptimist commented 4 years ago

That all sounds great. You could start restructuring the existing .less files to something more like the structure in your link, if you'd like to. Thanks Sarah!

ssunday commented 4 years ago

Er, are you saying implement styled components or tweak the folder structure? Either way seems legit to me (you could always mix the two). Just confirming!

cynicaloptimist commented 4 years ago

I think they're both good projects. styled-components seems like a great way to start co-locating component CSS, while the sass-inspired folder structure changes seem like a nice way to clean up and organize a lot of the "global" css that isn't associated with an individual component. Feel free to take on either one, or both, if they sound exciting.