19 ms·

To be clear - when I need to toggle a basic state with a class or set of classes, that is the strategy I use. Where that technique fails is when you have hundr

To be clear - when I need to toggle a basic state with a class or set of classes, that is the strategy I use. Where that technique fails is when you have hundreds of possible values that can occupy a given state. If I want to set the rotation or opacity for a control and I want to use a range of values, there is nothing native in CSS to allow me to do that. You can use SCSS to dynamically generate the CSS class declarations for every possible value, but I would only ever use that solution if I needed the performance boost and that was the only way to get it.

runarberg 5y ago
I see what you mean. For that I would use a CSS custom property: .rotatable { transform: rotate(var(--rotation-angle)); } ...and set it directly with JavaScript document .querySelector('.rotatable') .style.setProperty( '--rotation-angle', `${angle}deg`, );
- rajangdavis 5y ago
  And that's why I wrote: If you want to have a range of applicable values for some CSS property or state-based styling, CSS-in-JS can be a good tool for expressing that as opposed to writing JS that updates some styling declaratively
  - runarberg 5y ago
    I see. There might be a difference in opinion. I think there is a fundamental difference in setting style properties in JS and setting CSS custom properties (even though CSS custom property is a style property). The main difference is that it is clear from the CSS that this property is dynamic and can be expected to change. If you overwrite a style attribute (e.g. `element.style.transform = "rotate(50deg)"`) this is less clear. So in honestly I don’t see how setting a CSS custom property in JavaScript as lacking in expressing the intent.
    - rajangdavis 5y ago
      The main use case highlighted in the article is React and that is the use case that I am speaking to. With React, you don't modify the DOM directly, so the use case you have laid out is not applicable. With that in mind, you are still free to use the CSS custom property with React, but if you want to have multiple transformations across multiple parts of an application, it's a lot simpler to use CSS-in-JS to generate styling based on state. The use case you have brought up should work well with vanilla js/jquery; however, the context of the discussion is rooted in front-end libraries and the popularity of CSS-in-JS, so I am not sure how custom properties are relevant.
- Aeolun 5y ago
  That’s not a very elegant solution in any front-end JS framework. Calling directly to css/element styles is generally strongly discouraged.
  - runarberg 5y ago
    Any insight into why that is discouraged? Also I explain on a sibling thread that there is a fundamental difference between setting a custom property (like I do here) and setting a specific style value. While I do see how the latter can be problematic as there are no hints to the changed style in the CSS file, the former does not have that issue, particularly if you name the property with a hint to the dynamic nature if it.

runarberg 5y ago

I see what you mean. For that I would use a CSS custom property: .rotatable { transform: rotate(var(--rotation-angle)); } ...and set it directly with JavaScript document .querySelector('.rotatable') .style.setProperty( '--rotation-angle', `${angle}deg`, );

rajangdavis 5y ago
And that's why I wrote: If you want to have a range of applicable values for some CSS property or state-based styling, CSS-in-JS can be a good tool for expressing that as opposed to writing JS that updates some styling declaratively
- runarberg 5y ago
  I see. There might be a difference in opinion. I think there is a fundamental difference in setting style properties in JS and setting CSS custom properties (even though CSS custom property is a style property). The main difference is that it is clear from the CSS that this property is dynamic and can be expected to change. If you overwrite a style attribute (e.g. `element.style.transform = "rotate(50deg)"`) this is less clear. So in honestly I don’t see how setting a CSS custom property in JavaScript as lacking in expressing the intent.
  - rajangdavis 5y ago
    The main use case highlighted in the article is React and that is the use case that I am speaking to. With React, you don't modify the DOM directly, so the use case you have laid out is not applicable. With that in mind, you are still free to use the CSS custom property with React, but if you want to have multiple transformations across multiple parts of an application, it's a lot simpler to use CSS-in-JS to generate styling based on state. The use case you have brought up should work well with vanilla js/jquery; however, the context of the discussion is rooted in front-end libraries and the popularity of CSS-in-JS, so I am not sure how custom properties are relevant.
Aeolun 5y ago
That’s not a very elegant solution in any front-end JS framework. Calling directly to css/element styles is generally strongly discouraged.
- runarberg 5y ago
  Any insight into why that is discouraged? Also I explain on a sibling thread that there is a fundamental difference between setting a custom property (like I do here) and setting a specific style value. While I do see how the latter can be problematic as there are no hints to the changed style in the CSS file, the former does not have that issue, particularly if you name the property with a hint to the dynamic nature if it.