5 ms·

A 4 year experienced react dev here. I have had decent time working with different styling I'll try to answer few common things for everyone's context Why eve

by hudixt 5y ago

A 4 year experienced react dev here. I have had decent time working with different styling I'll try to answer few common things for everyone's context Why even use CSS in JS? - SPA bundling usually loads all CSS at once and all styles collide. You need to be super good at naming stuff/or load CSS based on module. So your CSS will be conflicting, so scoping is helpful here. - Not having to jump from your component file to CSS file. Save some context switching or few strokes. - Dynamic control over style. Basically your stylesheet is JS function returning style. You can do anything here. See this https://github.com/styled-components/styled-components/issues/1018#issuecomment-316827497 https://github.com/styled-components/styled-components/issue... - Support for JS reference in color, font sizes, etc with editor support. It'll lead to more consistent design system. - More cleaner API when using media queries, pseudo states. eg-https://emotion.sh/docs/media-queries https://emotion.sh/docs/media-queries Another alternative is Emotion, also I find it to be much more cleaner in code perspective. (Good performant library in terms of layout and painting). Why is export option not available for most CSS in JS (some suggested this as solution)? Read this https://github.com/emotion-js/emotion/blob/bcf40cf2c201534813f7e3070aacd59e9f674f6f/docs/extract-static.mdx https://github.com/emotion-js/emotion/blob/bcf40cf2c20153481... Is it worth it? - Depends a lot on context and your perfonal objective. Generally I personally feel it's worth it as it's good tooling. - CSS in JS is lot better than what it used to be. Styled component had good perf bump in last few years.

stevebmark 5y ago
CSS modules solves all of these problems (except the separate file), and also lets you write vanilla CSS, and not have to hack around the limitations of css-in-js. Dynamic styles are easy with React's `css` prop, or simply passing in an additional class name.
- mikewhy 5y ago
  React doesn't have a CSS prop.
  - frank_nitti 5y ago
    Must be referring to the style prop for jsx elements whose argument conforms to the React.CSSProperties interface
    - mikewhy 5y ago
      Hard to say, for instance the very popular styled-components package does add a `css` prop magically to all elements.
  - girvo 5y ago
    I think they've assumed `styled-components` is default?
- hudixt 5y ago
  Added one more point on API. Also, you'll probably end up using one more library called classname for better classname management. https://www.npmjs.com/package/classnames https://www.npmjs.com/package/classnames In the end, I generally prefer to use tailwind + emotion. My goals usually is to save time and make system more consistent rather than perf gains, which isn't that much on new systems.
  - nicoburns 5y ago
    Indeed. Worth noting that classnames is a tiny library.
    - lhnz 5y ago
      I've heard that `clsx` is faster: https://github.com/lukeed/clsx https://github.com/lukeed/clsx
      - nicoburns 5y ago
        Looks like a well designed library (and it is only 40 lines long - but then the original isn't much bigger). But it's hard for me to imagine code where this is a bottleneck.
onion2k 5y ago
You need to be super good at naming stuff/or load CSS based on module. You don't need to be that good, and there are methodologies that can help eg BEM.
seumars 5y ago
It depends a lot on the context if that context is React. CSS in JS in retrospect looks like a shim for react developers who couldnt rewrite their code to single-file components like in Vue and later Svelte. You dont have to be a genius to know how to name and structure dom elements, though being good at it lets you reuse css and reduce overall app size better than any bundler ever will - but its just easier to install Tailwind.
gentleman11 5y ago
Whenever you talk to somebody about how ridiculous it is to need a preprocessor to do basic sane things in css, you hear about how “css isn’t designed for that, it’s better this way. Use a preprocessor!”. Preprocessors are a workaround, not “the way it should be.” There’s no good reason why a @media query can’t take a variable for a min-size value, it just makes things error prone. Yet, the css spec is so proud of itself it has declared that there will never be a css 4

by hudixt 5y ago

stevebmark 5y ago

CSS modules solves all of these problems (except the separate file), and also lets you write vanilla CSS, and not have to hack around the limitations of css-in-js. Dynamic styles are easy with React's `css` prop, or simply passing in an additional class name.

mikewhy 5y ago
React doesn't have a CSS prop.
- frank_nitti 5y ago
  Must be referring to the style prop for jsx elements whose argument conforms to the React.CSSProperties interface
  - mikewhy 5y ago
    Hard to say, for instance the very popular styled-components package does add a `css` prop magically to all elements.
- girvo 5y ago
  I think they've assumed `styled-components` is default?
hudixt 5y ago
Added one more point on API. Also, you'll probably end up using one more library called classname for better classname management. https://www.npmjs.com/package/classnames https://www.npmjs.com/package/classnames In the end, I generally prefer to use tailwind + emotion. My goals usually is to save time and make system more consistent rather than perf gains, which isn't that much on new systems.
- nicoburns 5y ago
  Indeed. Worth noting that classnames is a tiny library.
  - lhnz 5y ago
    I've heard that `clsx` is faster: https://github.com/lukeed/clsx https://github.com/lukeed/clsx
    - nicoburns 5y ago
      Looks like a well designed library (and it is only 40 lines long - but then the original isn't much bigger). But it's hard for me to imagine code where this is a bottleneck.

onion2k 5y ago

You need to be super good at naming stuff/or load CSS based on module. You don't need to be that good, and there are methodologies that can help eg BEM.

seumars 5y ago

It depends a lot on the context if that context is React. CSS in JS in retrospect looks like a shim for react developers who couldnt rewrite their code to single-file components like in Vue and later Svelte. You dont have to be a genius to know how to name and structure dom elements, though being good at it lets you reuse css and reduce overall app size better than any bundler ever will - but its just easier to install Tailwind.

gentleman11 5y ago

Whenever you talk to somebody about how ridiculous it is to need a preprocessor to do basic sane things in css, you hear about how “css isn’t designed for that, it’s better this way. Use a preprocessor!”. Preprocessors are a workaround, not “the way it should be.” There’s no good reason why a @media query can’t take a variable for a min-size value, it just makes things error prone. Yet, the css spec is so proud of itself it has declared that there will never be a css 4