popcodeorg / popcodeorg/popcode

Migrate to CSS modules

Offen
#1,437 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

code quality
Vorherrschende Sprache
JavaScript
Sterne
191
Forks
143
Ø Merge
4 T. 11 Std.
Gemergte PRs (30 T.)
5

Beschreibung

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.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, application.css zu lesen und seine BEM-Blöcke den entsprechenden React-Komponenten zuzuordnen. Vergleiche den Ansatz des direkten Imports von CSS-Modulen mit babel-plugin-react-css-modules und ermittle anschließend Styling-Abhängigkeiten zwischen übergeordneten und untergeordneten Komponenten. Als abgeschlossen gilt die Aufgabe, wenn das monolithische Stylesheet Komponente für Komponente migriert wurde, ohne Styling-Kopplung zwischen Komponenten.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
css, javascript, react, webpack
Bereich
frontend, web-dev
Issue-Typ
Refactoring
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.