search

Neha / AMA

AMA - Ask me anything
10 stars 2 forks source link

Managing SASS in ReactJS #1

Open kushagrarora17 opened 5 years ago

kushagrarora17 commented 5 years ago

What can be the smartest way(s) to manage SASS of React projects?

Desired scenario would be:

  1. No code repition
  2. Small file size
  3. Bundling (if that's possible)
  4. Freedom to use pseudo-classes
Neha commented 5 years ago

#1 No Code Repetition: I use SASS-7-1-pattern : https://gist.github.com/rveitch/84cea9650092119527bc It made you write your code as per page, component, as well as Global (util) too. This makes you to have control on the code you writing

#2 Small File size: Generally, this is the most challenging part. I depend on the minifer the most but also I do manual cleaning too. After every 2 sprints , I get into the generated CSS & Identify the repetitive code & remove it. Same I do by visiting the SASS files too.

Another approach is to - not to import all SCSS files which will be required on-demand example - Themes; I keep seprate theme CSS from the main CSS and we include them when require.

# Bundling & Freedom to use pseudo-classes Can you elaborate more?

kushagrarora17 commented 5 years ago

Detailed problem #3 In React projects, writing styles along with components provide best performance and bundling is not needed(please correct me if I am wrong here).

By 'bundling' I meant, unrequired CSS never gets loaded.

But CSS-in-JS don't provide the liberty to use pseudo-classes, unless we use packages like 'styled-components'. Is there any better approach?

Neha commented 5 years ago

Yes, if you will use CSS-in-JS you won't require the bundling and could be good in performance (I am not sure about performance. As I haven't tested perf for CSS-in-JS). What I like about them is the control they give.

For unrequired CSS never gets loaded - there is a concept of critical CSS and divide the CSS into multiple files and load as when required.

For pseudo classes - I am not aware of any other solution.

kushagrarora17 commented 5 years ago

Thanks a lot. Exploring more options and validating existing approaches was very helpful.