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

green tea bitch

-
let me tell you the story of a green tea bitch and a hamsum with cheater potential.  i work closely with greentea in office. greentea has/had a long term boyfriend if more than 5 years (not sure if they still together, greentea always winces when i ask her about mr i-seriously-think-you-were-cuckolded nowadays). but she also crushes on the now ex-tech lead mr suave. suave probably left to avoid suspicion? i remember seeing her and her mr cuckolded boyfriend, she was cosying, rubbing her body against mr cuckold and leaning into him talking, on the mrt on our way back, from one of our get togethers. also knows he buys her hundreds dollar worth gifts on her birthday. (actually not very expensive i guess, she is into expensive gifts). ms prettii and mr suave ever played accidental touch ( hand brushing as they both reached for the mouse, then longing looks). she sent him a sticker of fingers touching on group chat before. anyway suave decided to teach us newbies coding in chinese (cos he s
Read more

song

-
Image
this just came out. his recent songs are getting better, i'm impressed. metaphors and imagery on point. flying, running barefoot, looking back, blackened nails, tears in sleep, warm bright sunlight, dancing alone, flying free like a bird i relate to this because my life is to be honest, so-so in the friends department and non existent in the romance department.  i don't feel like really sad, or regret, or i need to change it. friends are busy and settled down,  some are less able to provide a listening ear (maybe to them it is childish, immature, or being listened to means you have have to reciprocate so maybe not, they have theirs at home already, they are stressed and have no more bandwidth for anything else).  that is the reality of being an adult. maybe the occasional sympathy and warmth from a colleague or friend or stranger. but that doesn't do it for me. i don't need the superficial. and i feel it is so easy to have values not align one day, or per
Read more

20231104

-
i feel like with whats going on recently.. has healed me.. my emotions all stuck in side.. extreme emotions.. and my masking.. i feel it is better for me not to pretend i am not a nerd..
Read more