popcodeorg / popcodeorg/popcode
Migrate to CSS modules
Nessuno ha ancora preso questa issue.
- Lingua principale
- JavaScript
- Stelle
- 191
- Fork
- 143
- Merge medio
- 4g 11h
- PR unite (30g)
- 5
Descrizione
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.
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia leggendo application.css e associando i relativi blocchi BEM ai componenti React corrispondenti. Confronta l’approccio di importazione diretta dei moduli CSS con babel-plugin-react-css-modules, quindi individua le dipendenze di stile tra i componenti genitore e figlio. Il lavoro è completato quando il foglio di stile monolitico è stato migrato componente per componente senza accoppiamento degli stili tra componenti.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- css, javascript, react, webpack
- Ambito
- frontend, web-dev
- Tipo di issue
- Refactoring
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 25/100