3 ms·
If you have a lot of dynamic styles that respond to application state, then even with vanilla CSS you are often writing JS to manage class declarations to get t
by eckmLJE 5y ago
If you have a lot of dynamic styles that respond to application state, then even with vanilla CSS you are often writing JS to manage class declarations to get the right CSS combinations. With styled-components, instead of adding/removing/combining class names, you can write javascript inside your declarations that use the state variables.
For me, writing javascript that directly sets css properties based on state variables is a more powerful and clearer approach to managing dynamic styles than manually managing class names.
Further, when combined with typescript, you can type a theme object in the styled-components theme provider and get auto-complete in your editor on your style tokens like colors, spacing values, timing in ms, etc.
So it has many benefits beyond scoping styles to a component.
- lwhi 5y ago> For me, writing javascript that directly sets css properties based on state variables is a more powerful and clearer approach to managing dynamic styles than manually managing class names. I'd argue there's a lot more flexibility available if you choose to use classes. Sure, it's more complicated and involves more work; but to say it's less powerful just isn't true.
- iaml 5y ago> there's a lot more flexibility available if you choose to use classes That is simply not true. Apart from what was described in the post above, in JSS frameworks such as styled-components, you usually have ways to hook directly into css parser, allowing you to implement custom expansions, replacements or basically whatever logic you want. This is not possible unless you write your own language and transform it to css.
- lwhi 5y agoWe'll have to agree to disagree.
- Aeolun 5y agoCSS is not a programming language. I find it hard to believe you think you can do more with plain CSS than with the full power of the Javascript programming language.
- lwhi 5y agoSure CSS isn't a programming language. However, when used correctly you can create a system that will allow you maintain and apply your presentation layer in an efficient, extensible, consistent and reusable way. Lack of knowledge isn't an excuse for believing otherwise. -- Edit: I'm actually shocked by how much bad feeling there is for standard front-end technology. A domain specific solution is a benefit.
- iaml 5y ago> you can create a system that will allow you maintain and apply your presentation layer in an efficient, extensible, consistent and reusable way. If that is your intention, typescript is a better tool for the job: you get type safety, ide autocomplete, tests (have you ever written a test for css?). You are right, being a domain specific solution is a benefit, but that has nothing to do with how good of a system you can make with it. I'm sure it's possible to write a system in typescript that would be as good as what you describe, but it will be more flexible at expense of being slower.
- lwhi 5y agoI don't know how to say this any other way. I think you are entirely incorrect. Typescript is absolutely not the solution.
- runarberg 5y agoI’ve had great luck achieving that with CSS custom properties. I assign a custom property to a style rule and then change that property with JavaScript when needed. I also find much state has a nice selector (e.g. :hover, :checked, :invalid, :empty, :focus-inside, etc.) or media queries `@media (prefers-color-scheme: dark)` which I can change the custom property values inside. So it is really an exception when I manually need to change the value of custom properties with JavaScript.