Thanks for advocating for tried-and-true 7-1 SCSS. Just because it's in React doesn't mean everything needs CSS-in-JS, styled components, etc etc. Sometimes well written global styles get the job done, especially with those --root-vars.
this is exactly what i wanted .. I'm working on a React project and when I decided to add some styling it became a mess and this helped me a lot to understand how my react folder structure could suit sass structure.. thank you so much
TLDR: if you just need to re-use styles, use global styles (e.g. using the 7-1 pattern) and not separate components. -- You could use both, but if one decided to pick Atomic Design, the need for a 7-1 pattern is probably non existent. I personally prefer to not use Atomic Design since it decouples your application for the worse. It's great in terms of DRY and from a (theoretical) component based type of development. However, it will make your codebase very abstract, hard to understand and difficult (time intensive, especially in TypeScript) to maintain. Inversion of control usually becomes a serious problem as well as the codebase starts to grow.
It really depends on the project itself. However, knowing how to write custom CSS is by far the most useful and desirable skill. You probably want to do that with either CSS Modules or Styled Components (/ Emotion). In the end it really depends on what your team / you prefer(s). I tend to skew more towards CSS Modules since it's much closer to just basic CSS, which most of the developers are (and should) be all familiar with.
Thanks for advocating for tried-and-true 7-1 SCSS. Just because it's in React doesn't mean everything needs CSS-in-JS, styled components, etc etc. Sometimes well written global styles get the job done, especially with those --root-vars.
this is exactly what i wanted .. I'm working on a React project and when I decided to add some styling it became a mess and this helped me a lot to understand how my react folder structure could suit sass structure.. thank you so much
Very glad to hear!
Your content is so good!
Great! Thanks.
Which is your favorite CSS framework?
I don't really like CSS frameworks, but I'd have to choose one, I'd go for Tailwind.
Here from Brad's channel! /wave
great video bro!
Helped me a lot
Hi, Thanks for this tutorial!! Can we have the repo link of this project to see the structure? Thank you so much
Hi Sourish, unfortunately I can't share the code since this in stored in a private repository ☹️
@@TechbaseDev it's okay I can understand 🙂. Make more video like this and thanks a lot.
Thank you.
I have a question.
In which cases we should use 7-1 pattern or Atom ?
TLDR: if you just need to re-use styles, use global styles (e.g. using the 7-1 pattern) and not separate components.
--
You could use both, but if one decided to pick Atomic Design, the need for a 7-1 pattern is probably non existent.
I personally prefer to not use Atomic Design since it decouples your application for the worse.
It's great in terms of DRY and from a (theoretical) component based type of development.
However, it will make your codebase very abstract, hard to understand and difficult (time intensive, especially in TypeScript) to maintain. Inversion of control usually becomes a serious problem as well as the codebase starts to grow.
Congratulations, bro
I just saw you in brad traversy channel
Thanks man!
so) i need use styled-components ?)
It really depends on the project itself. However, knowing how to write custom CSS is by far the most useful and desirable skill.
You probably want to do that with either CSS Modules or Styled Components (/ Emotion).
In the end it really depends on what your team / you prefer(s).
I tend to skew more towards CSS Modules since it's much closer to just basic CSS, which most of the developers are (and should) be all familiar with.
👍
bump