4 ms·

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 wr

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. For example, I've used it on a personal app to allow adjusting the placement and opacity of controls. I prefer the CSS-in-JS approach because the code is simple to understand, I can reuse the code in multiple areas, and I can pass state to some function to generate the styling. I also imagine that I could also write some spec to support it, but it's not something that I plan on quite yet. It's not a technique that I would use for ALL styling, but I think for the use-case I mentioned above, it works great.

The_rationalist 5y ago
Css variables can be exported and modified in js through some libraries and without having the constraints of css in js.
- runarberg 5y ago
  You don’t even need a library. Modifying a CSS variable is as easy as: myElement.style.setProperty('--my-custom-property', 'some-value');
runarberg 5y ago
There are number of techniques that can fit that. State based styling can be achieved with simple class name toggles or CSS animation + the `animationend` event. If you don’t like toggling classes with JS there are number of selectors (including the attribute selector) which you can use instead. For making code easier to understand you can set a CSS custom property instead of specific style values, and the CSS will be really straight forward.
- rajangdavis 5y ago
  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.

The_rationalist 5y ago

Css variables can be exported and modified in js through some libraries and without having the constraints of css in js.

runarberg 5y ago
You don’t even need a library. Modifying a CSS variable is as easy as: myElement.style.setProperty('--my-custom-property', 'some-value');

runarberg 5y ago

There are number of techniques that can fit that. State based styling can be achieved with simple class name toggles or CSS animation + the `animationend` event. If you don’t like toggling classes with JS there are number of selectors (including the attribute selector) which you can use instead. For making code easier to understand you can set a CSS custom property instead of specific style values, and the CSS will be really straight forward.

rajangdavis 5y ago
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.