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

Post a Comment

Popular posts from this blog

11/02/2021 - git commands for remote repo

-
git commands inital upload: git init --create github repo, copy the url create .gitignore, add in /node_modules, .env etc git commit . -m '<msg>' git remote add origin <url> git checkout -b <branch> git push origin <branch> deleting folder: (in case you added node module by accident) git checkout <branch> git rm -r <folder> git commit . -m '<msg>' git push origin <branch> adding/deleting/checking remote: git remote add origin <url> git remote -v git remote remove origin updating file: git commit . -m "<msg>" git push origin <branch> cloning from remote to local, updating changes from local to remote: --within working folder git init git clone <url> --> you get a subfolder with the cloned repo cd into the cloned folder git commit . -m "<msg>" git add remote origin <url> git fetch origin git push origin <branch> amend single file: git commit <file> -m ...
Read more

29/11/2021 - time flies

-
time flies. i have been working at a local tech start up since tis apr, and tomorrow's time for my mid review. recently, i have been dealing with anxiety. fears that i am not enough. my emotion is not very good. i do think about plan b. this shit is so hard. to me. so let's take stock things i have done react native set up mac - android studio + android phone (emulator wont work), xcode + ios phone / emulator windows - android, phone (emulator sucks) for some reason i have to build bundle somewhere else cos my internet wont point correct mac os quirks - m1 chip rosetta mode for xcode OR exclude arm64 architecture arch commands for pod on cli learnt along the way graphql+apollo little sql+hasura react native
Read more