Joshua Comeau digs into how styled-components works by re-building the basics. A fun and useful journey.
styled-components seems like the biggest player in the CSS-in-React market. Despite being in that world, I haven’t yet been fully compelled by it. I’m a big fan of the basics: scoped styles by way of unique class names. I also like that it works with hot module reloading as it all happens in JavaScript. But I get those through css-modules, and I like the file-separation and Sass support I get through css-modules. There are a few things I’m starting to come around on though (a little):
- 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.
- Because the styles are literally in the JavaScript files, you get JavaScript stuff you can use—ternaries, prop access, fancy math, etc.
Direct Link to Article — Permalink
The post Demystifying styled-components appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
Do you run a WordPress community site on BuddyPress? Are you looking to create the best social network on BuddyPress? If so, you’re in the right place. BuddyPress is one of the best community plugins for WordPress. It’s a great solution for social networks, intranets, online communities, teams, and groups. The platform is powerful but […]