4 ms·

While Styled Components, Styled JSX or Linaria (which doesn't require a JS runtime for production) are nice solutions, the fact that I can no longer use the col

While Styled Components, Styled JSX or Linaria (which doesn't require a JS runtime for production) are nice solutions, the fact that I can no longer use the colour picker and other tools to live edit CSS from the styles pane in the Elements tab in Chrome Dev Tools, sometimes makes me want to go back to plain CSS to get this functionality back.

jakelazaroff 8y ago
You can! I do this all the time.
- kowdermeister 8y ago
  With copy and paste? :)
  - jakelazaroff 8y ago
    Am I misinterpreting something? In my app that uses CSS-in-JS, if I go to the "Elements" tab of my browser developer tools and select an element, I have the option to inspect, add, remove and change styles — including using the color picker and bézier curve editor — and have it reflected live on the page.
    - leerob 8y ago
      When my styled-components app is in prod, the styles are non-editable. When developing, I can use Chrome Dev Tools. On prod, I have to copy paste. Maybe I'm doing something wrong?
      - exogen 8y ago
        I believe this is a result of it using the "CSSOM" browser APIs for speed in production. Unfortunately, browsers apparently haven't figured out how to make such styles editable yet. It's definitely a limitation of certain CSS-in-JS implementations, but unfortunately one that inherently comes from "using the platform."
    - kowdermeister 8y ago
      There's a little known feature in Chrome where you can save your inspector changes locally: https://rafaltomal.com/tips/save-css-chrome-inspector/ https://rafaltomal.com/tips/save-css-chrome-inspector/