4 ms·

Ask HN: Best Practices for CSS in a Modern JavaScript App

6 points by xwvvvvwx 10y ago

So I feel I have a pretty good idea of the tools and techniques available for modern javascript development (React / Angular / Webpack / Typescript / Redux / Mobx / Electron etc..), but when it comes to CSS I am pretty much lost, there seem like a ton of options (postcss / sass / less / css modules / radium / react-css / cssnext etc.) and I don't really have an idea about the various trade offs involved. I would be very interested to hear: - What are you using? - Why did you choose this? - What do you like? - What don't you like?

justinireland 10y ago
I prefer react-css with react mostly because I can import styles and treat them like regular objects. I also find it much easier to do responsive styling by computing CSS values with js. Another reason for this approach is that I believe React Native will be the universal framework for mobile and web development and it also uses this method of styling so I'm adapting to it.
- tracker1 10y ago
  I'm still using straight sass a lot (via node-sass/webkit) mostly because of legacy use of bootstrap. For future looking projects, I'd be inclined to try jss or aphrodite (for some reason I always think ambrosia when trying to remember that framework's name). I think that tighter integration to an application and controls will be better for webapp consistency... for a website, I might be inclined to go the post/precss route... though invariably it may come down to whatever UI kit I start from.
aprdm 10y ago
I just use pure CSS (crazy I know) with Angular. No complains so far but I don't do anything fancy in styling. Mostly just using bootstrap with some little tweaks.
mbrock 10y ago
"Best practices" are a mirage. I just use a regular CSS file. Because it works nicely without any weirdness.
AjJi 10y ago
LESS compiled to CSS, mainly use it because it looks better and I don't have to deal with selector weight, also variables are helpful for colors - and some mixins here and there when necessary
hakanito 10y ago
I've had a lot of success with CSS modules together with PostCSS. CSS modules are great if you're building a component based application using something like React, as it lets you sandbox the stylesheet together with the component's JS file, and forget about potential naming collisions. The PostCSS ecosystem has many modules that enables extra features, which you put in your webpack config. I used sass before, but not looking back now as you get the same features with postcss. Also, the node-sass bindings are always a mess to deal with.

6 points by xwvvvvwx 10y ago

justinireland 10y ago

I prefer react-css with react mostly because I can import styles and treat them like regular objects. I also find it much easier to do responsive styling by computing CSS values with js. Another reason for this approach is that I believe React Native will be the universal framework for mobile and web development and it also uses this method of styling so I'm adapting to it.

tracker1 10y ago
I'm still using straight sass a lot (via node-sass/webkit) mostly because of legacy use of bootstrap. For future looking projects, I'd be inclined to try jss or aphrodite (for some reason I always think ambrosia when trying to remember that framework's name). I think that tighter integration to an application and controls will be better for webapp consistency... for a website, I might be inclined to go the post/precss route... though invariably it may come down to whatever UI kit I start from.

aprdm 10y ago

I just use pure CSS (crazy I know) with Angular. No complains so far but I don't do anything fancy in styling. Mostly just using bootstrap with some little tweaks.

mbrock 10y ago

"Best practices" are a mirage. I just use a regular CSS file. Because it works nicely without any weirdness.

AjJi 10y ago

LESS compiled to CSS, mainly use it because it looks better and I don't have to deal with selector weight, also variables are helpful for colors - and some mixins here and there when necessary

hakanito 10y ago

I've had a lot of success with CSS modules together with PostCSS. CSS modules are great if you're building a component based application using something like React, as it lets you sandbox the stylesheet together with the component's JS file, and forget about potential naming collisions. The PostCSS ecosystem has many modules that enables extra features, which you put in your webpack config. I used sass before, but not looking back now as you get the same features with postcss. Also, the node-sass bindings are always a mess to deal with.