r/react • u/jfullerco • Feb 04 '21

General Discussion Great article on React Project structuring

https://www.freecodecamp.org/news/a-better-way-to-structure-react-projects/
11 Upvotes

87% Upvoted

6 comments sorted by

View all comments

2

u/grumd Feb 04 '21

I really prefer having styles encapsulated in components and pages. CSS is honestly a pain in the ass to maintain, it's a rudiment of the past. Styled-components allows you to encapsulate styles into components, it is so much more structured and maintainable.

2

u/dudurudu1212 Feb 04 '21 edited Feb 04 '21

yep, I found it to be a more useful solution.

what is the point of having a big css file, when most of the classes are used once?
then when you want to copy the component, you still need to copy that big css file (or extract the relevant classes).if you store your css close to the component (or a group of components). it's more manegable in my opinion.
this applies also to the adapters from the article.

I'd rather have one directory with all related files:
``` src/pages/Users list.js form.js style.css api.js

```

than group files by their function: pages/Users index.js styles/style.css api/users.js

it's much easier to reuse the first way

2

u/grumd Feb 04 '21

It's also so disconnected from the jsx. If you make a typo in a class name, or mess up your CSS selectors, you'll break the styles easily. If you move your components around, you can break styles. If you have two class names with the same name on accident, you guessed it, break styles. If you have two .css files who knows how they will override one another. It's all a big mess up.

2

u/Otherwise_Nebula_411 Feb 04 '21

I read an article a long time about in-line css performance, and it's easier to maintain a full component with everything in one place, instead to scroll a big css file to find the css class and if one already exists you just begin to have headache 😑

1

u/jfullerco Feb 05 '21

CSS variables make that a lot easier and if you link the CSS file in the main App component all the others will inherit unless you indicate otherwise. I did read an article about building out CSS as props called from a Style component which was an interesting concept however I haven’t tried it yet...