Business

Die Zeit vergeht

CSS-Selektoren existieren alle innerhalb desselben globalen Bereichs. Jeder, der lange genug mit CSS gearbeitet hat, musste sich mit seiner aggressiven globalen Natur abfinden - ein Modell, das eindeutig im Zeitalter der Dokumente entwickelt wurde und nun Schwierigkeiten hat, eine vernünftige Arbeitsumgebung für die modernen Webanwendungen von heute zu bieten. Jeder Selektor kann unbeabsichtigte Nebeneffekte haben, indem er auf unerwünschte Elemente abzielt oder mit anderen Selektoren kollidiert. Noch überraschender ist, dass unsere Selektoren sogar im globalen Spezifitätskrieg verlieren können und letztendlich wenig oder gar keine Auswirkungen auf die Seite haben.

Jedes Mal, wenn wir eine Änderung an einer CSS-Datei vornehmen, müssen wir die globale Umgebung, in der unsere Stile eingesetzt werden, sorgfältig berücksichtigen. Keine andere Frontend-Technologie erfordert so viel Disziplin, nur um den Code auf einem Mindestmaß an Wartbarkeit zu halten. Aber das muss nicht so sein. Es ist an der Zeit, die Ära der globalen Stylesheets hinter sich zu lassen.

Es ist Zeit für das lokale CSS.

In anderen Sprachen ist es üblich, dass das Ändern von die globale Umwelt ist etwas, das man nur selten, wenn überhaupt, tun sollte.

In der JavaScript-Community wird dank Tools wie Browserify, Webpack und JSPM nun erwartet, dass unser Code aus kleinen Modulen besteht, die jeweils ihre expliziten Abhängigkeiten kapseln und eine minimale API exportieren.

Doch irgendwie scheint CSS immer noch einen Freifahrtschein zu bekommen.

Viele von uns - mich eingeschlossen, bis vor kurzem - arbeiten schon so lange mit CSS, dass wir das Fehlen des lokalen Geltungsbereichs nicht als ein Problem ansehen, das wir ohne erhebliche Hilfe von Browser-Anbietern lösen können. Selbst dann müssten wir immer noch darauf warten, dass die Mehrheit unserer Nutzer einen Browser mit ordnungsgemäßer Schatten-DOM-Unterstützung verwendet.

Wir haben die Probleme des globalen Geltungsbereichs mit einer Reihe von Namenskonventionen wie OOCSS, SMACSS, BEM und SUIT, die uns jeweils eine Möglichkeit bieten, Namenskollisionen zu vermeiden und vernünftige Scoping-Regeln zu emulieren.

Wir müssen nicht mehr allen unseren Selektoren lange Präfixe hinzufügen, um Scoping zu simulieren. Weitere Komponenten könnten ihre eigenen foo und bar Bezeichner definieren, die - im Gegensatz zum traditionellen globalen Selektormodell - keine Namenskollisionen verursachen würden.

importieren Stile von './MeineKomponente.css';
importieren React, { Component } von reagieren";
Standardklasse exportieren MeineKomponente erweitert Komponente {
 machen.() {
    zurück (
      <div>
        <divstyles.foo}>Foo</div>
        <divstyles.bar}>Bar</div>
      </div>
    );
  }

Die Vorteile von globalem CSS - Wiederverwendung von Stilen zwischen Komponenten über Utility-Klassen usw.- sind auch mit diesem Modell erreichbar. Der Hauptunterschied besteht darin, dass wir, genau wie bei anderen Technologien, die Klassen, von denen wir abhängig sind, explizit importieren müssen. Unser Code kann nicht viele, wenn überhaupt, Annahmen über die globale Umgebung machen.

Das Schreiben von wartbarem CSS wird jetzt gefördert, nicht durch sorgfältige Einhaltung einer Namenskonventionsondern durch stilistische Kapselung während der Entwicklung.

Wenn Sie die Arbeit mit lokalem CSS einmal ausprobiert haben, gibt es kein Zurück mehr. Die Erfahrung mit echtem lokalem Umfang in unseren Stylesheets - in einer Weise, die in allen Browsern funktioniert - ist etwas, das nicht einfach ignoriert werden kann.

Die Einführung des lokalen Geltungsbereichs hat einen erheblichen Einfluss darauf, wie wir unser CSS angehen. Namenskonventionen, Muster der Wiederverwendung und die potenzielle Extraktion von Stilen in separate Pakete sind alle direkt von dieser Veränderung betroffen, und wir stehen erst am Anfang dieser neuen Ära des lokalen CSS.

process.env.NODE_ENV === 'Entwicklung' ?
    '[name]__[local]___[hash:base64:5]' :
    '[hash:base64:5]'
)

Wir sind immer noch dabei, die Auswirkungen dieses Wandels zu verstehen. Ich hoffe, dass wir mit Ihren wertvollen Beiträgen und Experimenten diese Diskussion gemeinsam als größere Gemeinschaft führen können.

Hinweis: Die automatische Optimierung der Wiederverwendung von Stilen zwischen Komponenten wäre ein großer Schritt nach vorn, aber es erfordert definitiv die Hilfe von Leuten, die viel klüger sind als ich.

von admin