Joshua Comeau digs into how styled-components works by re-building the basics. A fun and useful journey.
- Even with css-modules, you still have to think of names. Even if it’s just like
.rootor whatever. With styled-components you attach the styles right to the component and don’t really name anything.
- With css-modules, you’re applying the styles directly to an HTML element only. With styled-components you can apply the styles to custom components and it will slap the styles on by way of spreading props later.
Styled Components are great! As you get deeper into it you slowly learn more and more great stuff you can do with it! It really is my favorite kind of styling in React!
Shipping only the CSS needed for the components in view is another huge advantage.
Not sure if the naming cognitive load changes much with styled components. Still have to name each component.
Didn’t we spend a decade, about a decade ago, teaching people how style attributes to HTML tags are bad?