08/06/2020 - scoped css with sass + react
css is not modular
- modular css like javascript - want to have local scope
- want to make react components with scoped css
- css-in-js
- writing the css inside the js / component file
- css-in-js libraries: jss, react-jss, styled components, emotions
- how the libraries work - at precompile they tag on a class name so the scope is more limited
- cons : they dont seem to allow cascading and need to tack on a class name to every single element, tedious
- i tried naming my files [component].modules.css, but it doesn't work. maybe it needs webpack? i am not familiar with webpack.
solution
- sass: use node-sass and sass in the react/node project
- i decided to use sass and its nested feature, with a classname at the top level selector
- features: variables, @use, nesting, mixins (not tried), partial
- scss is a sass file type that uses css syntax
- preserves the cascading feature of css
steps
- in my react component, add a top level div with class name
- top level div functions as a style wrapper
- create a .scss stylesheet for the component and import / link it to the .js/ component file
- use sass nesting and put the classname at the top level selector
- in the app.js (root component), create a stylesheet
- this will set global styles and variables - like your theme and default settings
- usually i will wipe all margin, padding, border, box shadow
- set color theme like primary (dark and light), mono (dark and light), and perhaps secondary
- usually mono or primary+mono color palettes are enough for me
additional reading
- sass guide - sass is syntactic sugar for css + added features
- bem - bem is a way to organise css
- bootstrap - css library, tack on styles by inserting bootstrap classnames
Comments