State of the Art JavaScript in 2016
Francois Ward
3.8K139

I think you’re mostly spot on with CSS/Styles… there’s still some shakedown there, for me, the question really is, are you going to use a base CSS library (like bootstrap), or not.

If so, that can make your decision for you… for bootstrap (either v3 via bootstrap-sass, or v4), I’ll usually copy variables to my projects styles/_variables.scss, and reference via styles/_mixins.scss and create a styles/bootstrap_custom.scss that references the files in node_modules/bootstrap/… directly… The sass-loader config is modified so that my project’s styles directory is included in the root search.

By doing this, all my components can have their own scss loaded, referencing mixins/variables as needed, and the bootstrap_custom is only referenced in my root’s styles/index.scss, only loaded once. With webpack devserver, the individual component scss (namespaced by .feature_subfeature_component classes) re-load very quickly.

There are alternatives… material-ui is very cool, along with component style builders, and class memoizers. That said, I still don’t find find any of them quite as nice as integrating bootstrap from source… Though may give material-ui a better shakedown in the near future.