Bezüglich des globalen Geltungsbereichs von CSS

html {
  font-family: Roboto, sans-serif;
}

Mit Ausnahme einiger Formular-Elemente haben Sie gerade eine Schriftart für jeden Text auf einer Website festgelegt! Gut gemacht! Wahrscheinlich war das, was Sie beabsichtigt hatten, denn bei wahrscheinlich Hunderten von Elementen auf Ihrer gesamten Website wäre es mühsam und fehleranfällig, jedes Mal diese font-family festzulegen.

CSS ist von Natur aus global. Mit Absicht!

Ich mag, wie David Khourshid es formuliert hat

Haben Sie jemals darüber nachgedacht, *warum* CSS einen globalen Geltungsbereich hat? Vielleicht möchten wir konsistente Typografie, Farben, Größen, Abstände, Layouts, Übergänge usw. verwenden und möchten, dass unsere Websites und Apps wie eine zusammenhängende Einheit wirken?

Liebe die Kaskade, die Kaskade ist dein Freund.

Und doch. Die globale Natur von CSS ist vielleicht die am häufigsten kritisierte „Nicht-Funktion“ von CSS. Manche Leute mögen es wirklich nicht. Wir alle wissen, wie einfach es ist, eine einzelne CSS-Regel zu schreiben, die Auswirkungen auf der gesamten Website hat und Dinge bricht, die man wirklich nicht brechen wollte.

Zwei CSS-Eigenschaften gehen in eine Bar.

Ein Barhocker in einer völlig anderen Bar fällt um.

— Thomas Fuchs 🎄🕹💾 (@thomasfuchs) 28. Juli 2014

Es gibt ganz neue Kategorien von Tests, die bei diesen Problemen helfen.

Geltungsbereiche-definierte Stile sind nicht der *einzige* Grund für das große Interesse und die Akzeptanz von CSS-in-JS, aber sie sind ein wichtiger Faktor. Es gibt viele Websites, die gar keine CSS-Dateien direkt authorn – nicht einmal vorverarbeitete Stile – und stattdessen eine JavaScript-Bibliothek verwenden, bei der Stile buchstäblich in JavaScript geschrieben werden. Es gibt ein interaktives Beispiel, das die Syntax der verschiedenen Optionen demonstriert. Hier ist, wie styled-components funktioniert.

import React from 'react';
import styled from 'styled-components';

const Container = styled.main`
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  background-color: #f6f9fc;
`;

export default function Login() {
  return (
    <Container>
      ... Some stuff ....
    </Container>
  );
}

Es gibt buchstäblich Dutzende von Optionen, die jeweils Dinge ein wenig anders handhaben und leicht unterschiedliche Syntaxen und Funktionen bieten. Vue bietet sogar Scoped CSS direkt in .vue-Dateien an.

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

Leider hat <style scoped> nie ganz als native Webplattformfunktion Fuß gefasst. Es gibt jedoch Shadow DOM, wo ein Stilblock in eine Vorlage eingefügt werden kann und diese Stile vom Rest der Seite isoliert werden.

let myElement = document.querySelector('.my-element');

let shadow = myElement.attachShadow({
  mode: 'closed'
});
shadow.innerHTML = `
  <style>
    p { 
      color: red;
    }
  </style>

  <p>Element with Shadow DOM</p>
`;

Keine Stile werden diese Shadow DOM-Grenze durchdringen oder daraus austreten. Das ist ziemlich cool für Leute, die diese Art von Isolation suchen, aber es könnte knifflig sein. Sie müssten das CSS wahrscheinlich so gestalten, dass es bestimmte globale Stile hat, die mit der mit Shadow DOM versehenen Webkomponente importiert werden können, damit sie eine gewisse Styling-Kohäsion auf Ihrer Website erzielen. Persönlich wünschte ich mir, es wäre möglich, das Shadow DOM Einweg-durchlässig zu machen: Stile können hineingelangen, aber Stile, die darin definiert sind, können nicht hinausgelangen.

CSS-in-JS-Dinge sind nur eine Möglichkeit, Stile zu isolieren. Es gibt tatsächlich zwei Seiten des Spektrums. Man könnte CSS-in-JS als totale Isolation bezeichnen, während man CSS direkt mit totaler Abstraktion authorn könnte.

Totale Abstraktion könnte von einem Projekt wie Tachyons kommen, das Ihnen eine feste Menge von Klassennamen zum Stylen gibt (Tailwind ist wie eine konfigurierbare Version davon), oder ein programmatisches Werkzeug (wie Atomizer), das speziell benannte HTML-Klassenattribute in ein Stylesheet mit genau dem umwandelt, was es benötigt.

Selbst die vollständige Einhaltung von BEM über Ihre gesamte Website hinweg könnte als totale CSS-Isolation betrachtet werden und die Probleme lösen, die der globale Geltungsbereich mit sich bringen kann.

Persönlich würde ich gerne sehen, dass wir uns in diese Zukunft bewegen.

Wenn wir Stile schreiben, werden wir immer eine Wahl treffen. Sind das globale Stile? Lecke ich absichtlich diesen Stil über die gesamte Website? Oder schreibe ich CSS, das spezifisch für diese Komponente ist? CSS wird zwischen diesen beiden geteilt. Komponentenspezifische Stile werden gekapselt und mit der Komponente gebündelt und bei Bedarf verwendet.

Das Beste aus beiden Welten, sozusagen.

Wie auch immer, es ist knifflig.

Das Problem ist nicht CSS in JS.

Es ist der globale Geltungsbereich von CSS.

Lösen Sie den globalen Geltungsbereich, und CSS in JS wird folgen.

(Ich weiß nicht, ob „folgen“ bedeutet verschwinden, vollständig akzeptiert werden oder eine große Überarbeitung erfahren.)

(Was das angeht, weiß ich nicht, was „den globalen Geltungsbereich lösen“ bedeutet.)

— ppk 🇪🇺 (@ppk) 28. November 2018

Vielleicht wird dies 2019 das heißeste CSS-Thema sein.