Migrating to CSS Modules

In our current implementation of sylesheet , the css styles of every components is done at stylesheet folder .

using css modules ,
1.we can make more intuitive design structure of our project .
2.avoid classNames collisions .
3.dedicated stylesheet file for each component wrapped up in same folder containing component , will make things as one entity. debugging the stylesheet will be very easy rather to find separate files in stylesheet folder .(ENCAPSULATION)
4.cross platform rendering becomes easier
5.performance boost.

@mr_monkey
should we consider it in our bookbrainz-site ?

If we do that, what about stuff that are used across the website or in many pages. Won’t we have to write same code for everypage?

@prabalsingh24
Please go through the image once…


will realise that how much performance matters.
Also it’s not that we have to make redundant data of css, there will be a global css file which will contain the css styling of all the common classes, we don’t need to write same css everytime…

There is not at all any chance of writing same css everywhere, we can have common css as well.

Also,
Css modules follows ENCAPSULATION.
Also it is useful when rendering our site on cross plat
Forms, such as react-native.

Hmmm. Yeah tbh I don’t know much about css and all. :stuck_out_tongue:

1 Like

@prabalsingh24
No problem. That’s easy to learn.
And if we get chance to work together, I will help you in learning css :blush::sweat_smile:.

1 Like

Considering the size of the job and the potential for something breaking without anyone realizing (some missing style can be hard to see!), I would want a solid list of useful benefits.
At the moment, I see some nice-to-haves and some hypothetical performance boost, and fixes for issues we don’t have.

I’m not convinced this is necessary nor desirable.

@mr_monkey
Right now, I know we have more other bugs to fix,
And improving for little benefit and spending time to migrate may sound worthless…

But
My purpose was to improve code base structure, with the latest trend, and to make our code base more robust by improving performance by avoiding nesting of css selectors.

Right now, I am paying more attention to other bugs and issues,
Once I finish those assigned to me.
I would definitely purpose a solid list of benefits. :blush:

1 Like