3 ms·

> More styling options: you can use Sass and CSS Modules out of the box. This is what I'm most excited about. Emotion is great but I've heard a lot of great th

> More styling options: you can use Sass and CSS Modules out of the box. This is what I'm most excited about. Emotion is great but I've heard a lot of great things about CSS Modules, just haven't gotten around to trying them out yet because it's been so complicated to do. I'll definitely be giving it a try now.

davman 8y ago
I wrote a bit[1] about CSS Modules with React, but interestingly it looks like CRA isn't using babel-plugin-react-css-modules so I'm trying to figure out what they're doing instead. [1] https://dev.to/daveirvine/postcss-with-css-modules-andreact-51ln https://dev.to/daveirvine/postcss-with-css-modules-andreact-...
- ascorbic 8y ago
  It's perfectly fine to just use css-loader to handle CSS modules. No need for babel. Just do: import styles from "./style.css"; <Component className={styles.myClassName} />
werbel 8y ago
I started my engineering career as a front-end developer when being front-end developer meant slicing PSDs to HTML trying to figure out the best way to implement crazy glassy and shadowy designs without transparent PNG support in IE6. Starting using CSS Modules "properly" with custom built UI components library was definitely the biggest single improvement in easiness of delivering stuff I've experienced across the "whole stack", from the hosting situation, DBs, through popularization of MVC on the server and client side, micro-services to react itself. Please do give a try. :) One rule of thumb I passed on my friend learning working with CSS Modules: Never share styles between components. Sometimes it's very tempting but instead try to compose your components in different ways. You might want to share style or create mixin for white box with a border and shadow for 2 very similar components. Creating WhiteShadowedBox component even if it's a div with 3 lines of CSS is fine and will save a some headache later. Of course needs a better name. ;) It's fine to use variables and mixins for "style config" like colors, font definitions, margin scales (0.8rem, 1.2rem, 1.6rem) etc but in my experience not much more.
gabrielhoch 8y ago
They're cool, but unfortunately in order to use babel-plugin-react-css-modules (which massively improves the experience) you still have to eject.
brendanmc6 8y ago
I can't imagine using anything other than styled-components... Are there advantages to using CSS Modules instead? Every time I look at the docs for another styling solution I just see unnecessary complexity for no clear benefit. Styled components are so easy to reason about and organize, especially when doing conditional / state based styling.

davman 8y ago

I wrote a bit[1] about CSS Modules with React, but interestingly it looks like CRA isn't using babel-plugin-react-css-modules so I'm trying to figure out what they're doing instead. [1] https://dev.to/daveirvine/postcss-with-css-modules-andreact-51ln https://dev.to/daveirvine/postcss-with-css-modules-andreact-...

ascorbic 8y ago
It's perfectly fine to just use css-loader to handle CSS modules. No need for babel. Just do: import styles from "./style.css"; <Component className={styles.myClassName} />

werbel 8y ago

I started my engineering career as a front-end developer when being front-end developer meant slicing PSDs to HTML trying to figure out the best way to implement crazy glassy and shadowy designs without transparent PNG support in IE6. Starting using CSS Modules "properly" with custom built UI components library was definitely the biggest single improvement in easiness of delivering stuff I've experienced across the "whole stack", from the hosting situation, DBs, through popularization of MVC on the server and client side, micro-services to react itself. Please do give a try. :) One rule of thumb I passed on my friend learning working with CSS Modules: Never share styles between components. Sometimes it's very tempting but instead try to compose your components in different ways. You might want to share style or create mixin for white box with a border and shadow for 2 very similar components. Creating WhiteShadowedBox component even if it's a div with 3 lines of CSS is fine and will save a some headache later. Of course needs a better name. ;) It's fine to use variables and mixins for "style config" like colors, font definitions, margin scales (0.8rem, 1.2rem, 1.6rem) etc but in my experience not much more.

gabrielhoch 8y ago

They're cool, but unfortunately in order to use babel-plugin-react-css-modules (which massively improves the experience) you still have to eject.

brendanmc6 8y ago

I can't imagine using anything other than styled-components... Are there advantages to using CSS Modules instead? Every time I look at the docs for another styling solution I just see unnecessary complexity for no clear benefit. Styled components are so easy to reason about and organize, especially when doing conditional / state based styling.