CSS-Spezifitätskriege

Während wir unser monolithisches System weiter in eine auf Microservices basierende Architektur migrieren und uns durch die Mikro-Frontend In der Landschaft hier bei FloQast ist es für mich immer schwieriger geworden, das gesamte CSS zu verwalten, das unsere React-Komponenten stylt. Ich finde es toll, dass Micro-Frontends es uns ermöglichen, Teamcode zu isolieren und unabhängige Bereitstellungen zu unterstützen, aber ich habe festgestellt, dass sie auch den traditionell globalen Charakter der Stylesheet-Sprache vergrößern. Wenn ich zum Beispiel im Micro-Frontend-Team A bin und das folgende CSS hinzufüge, wäre ich wahrscheinlich ziemlich enttäuscht vom Design meiner Komponente.

// micro frontend team A
.icon {
    color: blue;
}

// micro frontend team B
.icon {
    color: white;
 }

‍‍Konflikte können auftreten, wenn verschiedene Micro-Frontends unbeabsichtigt denselben Selektor oder Klassennamen aufrufen. Da unsere Teams manchmal zur gleichen Zeit auf derselben Seite arbeiten, kann es eine Herausforderung sein, sicherzustellen, dass jedes Team unabhängig seinen Stil schreibt. Dies gilt insbesondere, wenn der Code auf verschiedene Repositorys aufgeteilt ist und verschiedene Teams CSS möglicherweise zu unterschiedlichen Zeiten aktualisieren.

Ich achte besonders darauf, dass neue CSS-Regeln nicht fälschlicherweise andere Komponenten in der App beeinflussen. CSS bietet zwar ein gewisses Maß an Wiederverwendbarkeit, das es mir ermöglicht, redundante Stildeklarationen zu vermeiden, aber dieser Aspekt kann auch zu Abhängigkeiten zwischen HTML-Elementen und CSS-Regeln führen, typischerweise auf folgende Weise: 1. Mehrere Selektoren sind gruppiert, um auf verschiedene HTML-Elemente abzuzielen und sie zu formatieren.‍

.percentage-number, .percentage-sign { 
  font-size: 40px; 
  line-height: 1; 
}

‍2. Mehrere Klassennamen werden auf dieselben HTML-Elemente angewendet, wodurch mehrere CSS-Regeln auf sie abzielen.

.success { color: green; } 
.status-icon { font-size: 48px; } 

<div className="success status-icon" />

Ich finde es schwierig, diese Abhängigkeiten im Laufe der Zeit im Auge zu behalten, insbesondere wenn andere Entwickler den Code bearbeiten. Ich vergesse vielleicht, welche Regeln tatsächlich aktualisiert oder gelöscht werden müssen. Gibt es also eine andere Möglichkeit, Stylesheets zu organisieren?

Monolithische Stylesheets entkoppeln

Um unser CSS besser verwalten zu können, haben wir kürzlich implementiert gestylte Komponenten, eine CSS-in-JS-Bibliothek, die es uns ermöglicht, CSS ohne unerwartete Nebenwirkungen zu modifizieren. So können wir sicher sein, dass sich unsere Micro-Frontends wie erwartet verhalten, wenn sie zusammengefügt werden. Styled Components bringen Ihre Styles ins Zeitalter der Komponenten. Wenn Sie schon einmal mit React gearbeitet haben, wissen Sie vielleicht, dass es am besten ist, Komponenten zu erstellen, die völlig unabhängig voneinander sind, und einzelne Klassennamen für das Styling zu verwenden. Gestylte Komponenten helfen Ihnen dabei, diese bewährten Methoden durchzusetzen, indem sie durch eindeutige Klassennamen für Ihre Stile eine Eins-zu-Eins-Beziehung zwischen einem HTML-Element und seinem CSS fördern. Sie überbrücken auch die Lücke zwischen Komponenten und Styling, indem sie Ihnen die Möglichkeit geben, Komponenten auf wiederverwendbare Weise zu stylen. Gestylte Komponenten ermöglichen es Ihnen, sich keine Gedanken über die Verwaltung von Stylesheets zu machen und das Javascript-Ökosystem zu nutzen, indem Sie Ihr CSS direkt in Ihre Javascript-Dateien schreiben lassen.

Verwenden von gestylten Komponenten

Gestylte Komponenten nutzen die Möglichkeiten von Templates mit Tags, um Komponenten zu gestalten.„Es entfernt die Zuordnung zwischen Komponenten und Stilen. Das heißt, wenn du deine Styles definierst, erstellst du eigentlich eine normale React-Komponente, an die deine Styles angehängt sind.“ -Gestylte KomponentenWerfen wir einen Blick auf die Magie:

import styled from 'styled-components';

// Styled Component named StyledLabel
const StyledLabel = styled.label`
    color: gray;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
`;

const Component = () => {
  // Use it like any other component
  return <StyledLabel>Search</StyledLabel>;
}

In diesem Beispiel ist StyledLabel eine Styled Component, die ein HTML-Label mit den daran angehängten Stilen rendert. Das gestylt Die Methode konvertiert dann das Styling von Javascript in das tatsächliche CSS. So sahen die ursprüngliche Komponente und das CSS aus:

label { 
  color: gray; 
  font-weight: 700; 
  font-size: 12px; 
  text-transform: uppercase; 
} 

<label>Search</label>

Wenn Styled Components das StyledLabel erstellen, verwendet es einen Hashing-Algorithmus, um einen eindeutigen Bezeichner zu generieren. Dadurch wird verhindert, dass sich Klassennamen überschneiden, sodass Sie sich keine eigenen einfallen lassen müssen.

<label class="jewpRe bkIsBc">Search</label>

Sie können auch Ihre eigenen benutzerdefinierten Komponenten transformieren. Stellen Sie nur sicher, dass Sie eine ClassName-Requisite an das zugrunde liegende DOM-Element übergeben.

const SearchBar = ({ className, value, onChange, placeholder}) => {
    return {
        <TextInput
            className={className}
            value={value}
            onChange={e => onChange(e.target.value)}
            placeholder={placeholder}
        />
    };
};

const StyledSearchBar = styled(SearchBar)`
    line-height: 18px;
    font-size: 18px;
    margin: 1px -5px;
`;

Wenn du jetzt dein CSS hinzufügst oder änderst, musst du dir keine Sorgen machen, dass deine Styles unvorhersehbar in andere Teile der App gelangen. In ähnlicher Weise löschen Sie beim Löschen einer Komponente auch alle Stile zusammen mit ihr, wodurch toter Code und die Suche nach Klassennamen vermieden werden.

Andere Vorteile

Neben der Festlegung von Stilen und der Verbesserung der Entwicklererfahrung bieten Styled Components auch Folgendes:

Automatisches kritisches CSS: Fügen Sie nur das kritische CSS ein, das an gerenderte Komponenten gebunden ist, um unnötiges Laden von Code zu verhindern.
Automatische Lieferantenpräfixe: Wenden Sie Herstellerpräfixe auf CSS-Regeln an, damit Sie dies nicht tun müssen.
Dynamisches Styling: Geben Sie Requisiten genauso weiter, wie Sie es an normale React-Komponenten tun würden.
Themen: Definieren Sie ganz einfach ein gängiges Styling. Die Context-APIs von React bieten die Möglichkeit, Requisiten an alle gestylten Komponenten innerhalb von zu übergeben Theme-Anbieter Verpackung.

Nachteile

In Bezug auf die Leistung machen Styled Components Ihre .js Bündel sind etwas schwerer und verleihen Ihrer Anwendung eine zusätzliche Ebene. Als Kompromiss hilft Ihnen die Bibliothek jedoch dabei, die Anzahl der Netzwerkanforderungen für zu reduzieren .css Dateien, da nur die für eine Seite notwendigen Styles geladen werden.

Fazit

CSS-in-JS-Bibliotheken werden in der modernen Frontend-Entwicklung wahrscheinlich weiter an Bedeutung gewinnen. Vor allem angesichts der Beliebtheit komponentenbasierter Bibliotheken/Frameworks wie React. Wenn Ihr Team derzeit wiederverwendbare Komponenten nutzt, sind CSS-in-JS-Bibliotheken möglicherweise einen Blick wert. Sie können Ihnen helfen, einige häufige CSS-Frustrationen zu umgehen.

Gestylte Komponenten in React: Abkehr von SCSS