Comments by "Charles M." (@charlesm.2604) on "7 ways to deal with CSS" video.

@woofiewill That's exactly my point. styled components forces you to write all of your html markup (divs, paragraphs, images, everything) as stateless components that you then use inside your actual component. You have to do this for every single one of your component, depending on the design you even have to make multiple stateless components of the same markup for different styles. And it makes no sense ! Just look at one codebase using styled components or even their docs to understand what I'm saying.
13
@hgsbrodi It's an overkill to create every single HTML element as a component itself.
11
@z3rocodes Svelte doesn't support CSS modules out of the box, it's much more like Vue scoped and styled jsx had an affair. You write your styling in your component file and during compilation svelte will give an unique class to your component so that the styles will be scoped to that class. You can use preprocessors and it doesn't impact code splitting.
11
@ivanpartida7467 You can but that's not how most people use styled component. Also what would be the point ? Just use CSS modules for styling and add a style attribute for reactive/props based styling, it will have the same result but won't cost you to use a 3rd party library and will keep your codebase clean too.
8
@RiadDZz It's one of the biggest projects on the entire GitHub website bro.
6
@ivanpartida7467 Including the docs and example projects, of course.
4
@LtdJorge Yeah I guess, not a lot of bigger projects use Vue unfortunately. I've seen some real good websites using Nuxt though (I love opening devtools whenever I see a website that look good, you know, to see what's up). For example there are a lot of definitely legal anime websites using it.
4
Well the issue persists with React and Next so this video is 100% granted. Also if you really want people to switch over their entire codebase then recommend them Svelte ! Having the props and component functions as JavaScript instead of a messy JavaScript object makes the developer experience so much better. That's not to forget about the two-way data binding, native stores, custom events, conditional class directive, animations and powerful templating that make Svelte such a handy framework. We could talk about speed and bundle size but, let's be honest, if people choose React in their stacks they clearly don't care at this point.
3
Like others have said if you work with others it's more difficult and painful because you have to understand, work with and later tweak around with the markup they used and how they manage their classes. Tailwind solves this, the styling is done at the same time the markup is written and the utility names become conventions. At first I was kinda lost with tailwind but with intellisense give it 2 days of fooling around and you'll be good to go.
2
@ivanpartida7467 And it doesn't address my point about it being useless if used that way: const UselessComponent = styled.div` background-color: gray; span: { background-color: ${someState ? 'green' : 'red'}; } }` ... return ( <UselessComponent> <span /> </UselessComponent /> ) is the same as: return ( <div className={classes.root}> <span className={classes.defaultSpan} style=`${someState ? 'background-color: green;' : ''}` /> </div> ) so why would anyone use styled components then ?
1
@dangjoeltang Hard agree on your second point, although you can use nested styling with preprocessors like sass, that's what you have to deal with with an unopiniated library like React is (💩). But it definitely doesn't make it easier to read, it makes your component file confusing and hard to maintain. People using React and putting everything in 1 file, like the interfaces, state management, event functions, etc... Are bad React devs (because it's a bad design since it gets ran everytime your the state changes) and are hated by their team. If you want to use React you should create folder based components, with 1 file for the J/TSX, 1 file for the styling, 1 file for the functions and 1 file for the tests. Or use another library if that's not how you want to roll.
1