popcodeorg / popcodeorg/popcode

Migrate to CSS modules

Open
#1,437 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

code quality
Dominant language
JavaScript
Stars
191
Forks
143
Avg merge
4d 11h
Merged PRs (30d)
5

Description

CSS modules are pretty clearly the future. Migrate from monolithic application.css to CSS modules.

Currently feeling ambivalent about using direct CSS module import (supported by webpack) vs. something like babel-plugin-react-css-modules.

In general this should be relatively straightforward since the BEM blocks defined in application.css roughly correspond to React components. Ultimately we will want to just go one component at a time, migrating all of the rule sets used by classes in that component into the component’s companion CSS module.

We will want to be vigilant for situations in which there is coupling between styles in different components: for example, a situation in which a parent component defines a flex container, but the flex items are inside a child component. Generally we’ll want to refactor so that either the container is moved into the child component, or the flex items are moved down into the parent component; components should be self-contained from a styling standpoint.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading application.css and mapping its BEM blocks to the corresponding React components. Compare the direct CSS module import approach with babel-plugin-react-css-modules, then identify styling dependencies between parent and child components. Done means the monolithic stylesheet has been migrated component by component without cross-component styling coupling.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript, react, webpack
Domain
frontend, web-dev
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.