Refactor CSS

[vikiival]

Is your feature request related to a problem?

Currently, we have tons of CSS which I think is either obsolete or already covered in Bulma Helpers.

Moreover, some styles are fighting against each other, so there is inconsistency.

Describe the solution you would like

Have global CSS config for base styles?

Describe alternatives you have considered

UnCSS can be your friend

Screeenshots

KodaDot CSS cat

[roiLeo]

In some components the css is defined globally, we have strange behavior on other pages because it overwrite rules.
We will need to move css outside component into a file (styles/global.scss) or make it scoped.

[MubarakSULAYMAN]

@vikiival, I think it is high time there is some sort of instructions on how things should be done. You may add it to CONTRIBUTING.md or even README.md. It will really help guard against how changes affect already existing implementation while the full refactoring is implemented. I suggest all styles should be scoped till then.

[MubarakSULAYMAN]

@vikiival and @roiLeo, what are plans on setting rules for this. Is any one working on it yet?

[vikiival]

Game rules are pretty simple:

• prefer bulma css over custom css
• move duplicate css into separate scss files
• for component which have css use scoped.

@roiLeo have I missed anything?

[roiLeo]

I added the "global" comment in some files where the css was duplicated.
There are also many unused css rules that can be removed.

[yangwao]

Game rules are pretty simple:

• prefer bulma css over custom css
• move duplicate css into separate scss files
• for component which have css use scoped.

@roiLeo have I missed anything?

• Add best practices to Contributing #2729
• feat: add first version of kodadot style guide 💅  #2733

[vikiival]

Still open as the CSS is not refactored yet 😅

[prachi00]

@vikiival i can take up this refactor

[prachi00]

What is the priority for this?

[vikiival]

I would give it p3 I think we have more imporant tasks to tackle

[kodabot]

ASSIGNED - @prachi00 🔒 LOCKED -> Friday, May 27th 2022, 13:54:34 UTC -> 36 hours

[kodabot]

ASSIGNMENT EXPIRED - @prachi00 has been unassigned.

[roiLeo]

• remove/replace scoped styles when not needed (ref vuejs good pratices)

[yangwao]

👀

[prachi00]

I can start working on this now, just to confirm, our focus is

• prefer bulma css over custom css
• move duplicate css into separate scss files
• for component which have css use scoped

CC @roiLeo @vikiival

[vikiival]

Yeah,
but be aware that many components have changed (are rewritten via Composition API by @preschian )

[roiLeo]

Oupsi! not really completed as there is still some light work to be done

• Global css in component (can be found with comments in files)
• move component code into component scss files (gallery-item, nft-card, collection, carousel, loader... and more)
• Refactor CSS #1348 (comment)
• prefer bulma css over custom css
• Refactor CSS #1348 (comment)

if @prachi00 want to take a look

[prachi00]

is now a good time to start working on this? I dont want to get conflicts with the refactors and stuff? @roiLeo @vikiival @preschian

[roiLeo]

is now a good time to start working on this?

I don't think so since major part will be done when refactoring component, refer to #3710
But feel free to help on rewritting component vue3 way and/or with new design (#3844)

[prachi00]

is now a good time to start working on this?

I don't think so since major part will be done when refactoring component, refer to #3710 But feel free to help on rewritting component vue3 way and/or with new design (#3844)

@roiLeo where are we doing the vue3 rewrite?

[roiLeo]

@roiLeo where are we doing the vue3 rewrite?

We'll need to rewrite every components, some of them have already been done (#3825, #3771, #3718)

[yangwao]

• CSS Variables for theming  #4584

[prachi00]

@roiLeo can we close this one now?

[roiLeo]

Closing for now, css looks fine