3 ms·

I use CSS modules coupled with postcss (mainly for minimization and autoprefixing) and sass-loader almost exclusively. The one benefit from CSS-in-JS I can thi

by iooi 8y ago

I use CSS modules coupled with postcss (mainly for minimization and autoprefixing) and sass-loader almost exclusively. The one benefit from CSS-in-JS I can think of is when the JS needs to know of a value that would otherwise exist in CSS only. For example, I'll usually have a constants.scss file that I @import in other files, which for example will have a $max-modal-width: 600px; I have run across use cases where I want to read that value from JS, but I could never figure out how to do that and resorted to duplicating the constant's value in my code. CSS-in-JS would make this trivial.

tracker1 8y ago
CIJ also has the advantage of being able to more easily inject different configuration values for different builds/deployments... Client X deployment has a primary color of blue, client Y is red. And it can go much deeper where a theme is used globally and each component creates its' own styling based on that theme. With SCSS/Less, it's actually painful to try and inject these values in to the build, and more prone to error. In your example, say deployment A has a $max-modal-width of 600px, B is 550px. Or colors are different, fonts, other styling.
phpnode 8y ago
for your specific example - you can declare SCSS variables in a JSON file, that makes the definitions accessible to both JS and SCSS.
- iooi 8y ago
  This sounds pretty interesting, thanks for sharing. Do you have an example you can share? Are you using node-sass-json-importer?
  - phpnode 8y ago
    Using sass-vars-loader for this which is a webpack plugin: https://github.com/epegzz/sass-vars-loader https://github.com/epegzz/sass-vars-loader
Chyzwar 8y ago
You can use CSS Variables to bridge between. var style = getComputedStyle(document.body); console.log(style.getPropertyValue('--color-font-general')); :root { --color-font-general: #336699; } As a bonus point, you can also change the values of CSS Variables and layout will update automatically. Take a closer look at styles of YouTube.
- tracker1 8y ago
  Seems like a rather ugly hack to reverse-render values out.
  - Chyzwar 8y ago
    CSS Variables seems to be very useful for CSS. I am not sure if changing dynamically CSS variables from JS is a great idea but you have options to do so. There is more coming in project Houdini. https://developers.google.com/web/updates/2016/05/houdini#the_specifications https://developers.google.com/web/updates/2016/05/houdini#th...

by iooi 8y ago

tracker1 8y ago

CIJ also has the advantage of being able to more easily inject different configuration values for different builds/deployments... Client X deployment has a primary color of blue, client Y is red. And it can go much deeper where a theme is used globally and each component creates its' own styling based on that theme. With SCSS/Less, it's actually painful to try and inject these values in to the build, and more prone to error. In your example, say deployment A has a $max-modal-width of 600px, B is 550px. Or colors are different, fonts, other styling.

phpnode 8y ago

for your specific example - you can declare SCSS variables in a JSON file, that makes the definitions accessible to both JS and SCSS.

iooi 8y ago
This sounds pretty interesting, thanks for sharing. Do you have an example you can share? Are you using node-sass-json-importer?
- phpnode 8y ago
  Using sass-vars-loader for this which is a webpack plugin: https://github.com/epegzz/sass-vars-loader https://github.com/epegzz/sass-vars-loader

Chyzwar 8y ago

You can use CSS Variables to bridge between. var style = getComputedStyle(document.body); console.log(style.getPropertyValue('--color-font-general')); :root { --color-font-general: #336699; } As a bonus point, you can also change the values of CSS Variables and layout will update automatically. Take a closer look at styles of YouTube.

tracker1 8y ago
Seems like a rather ugly hack to reverse-render values out.
- Chyzwar 8y ago
  CSS Variables seems to be very useful for CSS. I am not sure if changing dynamically CSS variables from JS is a great idea but you have options to do so. There is more coming in project Houdini. https://developers.google.com/web/updates/2016/05/houdini#the_specifications https://developers.google.com/web/updates/2016/05/houdini#th...