Cascade Layers
Kaskadenschichten
Kaskadenschichten sind benannte Gruppen, die die Reihenfolge der CSS-Regeln festlegen. Der Browser überprüft diese Reihenfolge, bevor er die Spezifität der Selektoren vergleicht.
Ein weiteres Beispiel
Eine Website deklariert `@layer reset, tokens, components, utilities, overrides`. Ein leichtgewichtiger Utility-Selektor kann dann einen komplexen Komponenten-Selektor schlagen, weil seine Schicht später kommt. Händler-CSS geht in die früheste Schicht, und ein temporäres Override kann entfernt werden, ohne längere Selektoren zu hinterlassen.
Hauptteile
- 01Deklarierte Ebenenreihenfolge
- 02Regeln innerhalb von Schichten
- 03Ungeschichtete Grenze
Verwenden Sie es, wenn
Lege eine gemeinsame Schichtreihenfolge für Resets, Abhängigkeiten, Komponenten, Hilfsprogramme und Produktüberschreibungen fest.
Nutze es nicht, wenn
Erstellen Sie nicht für jede Komponente eine Ebene. Denken Sie auch daran, dass normale, nicht geschichtete Autorenregeln nach geschichteten Regeln kommen und diese übertreffen können.
In Code verwendeter Name
@layer reset, base, components, utilities, overrides Vor dem Ausliefern
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Kaskadenschichten (Cascade Layers). User context: Eine Website deklariert `@layer reset, tokens, components, utilities, overrides`. Ein leichtgewichtiger Utility-Selektor kann dann einen komplexen Komponenten-Selektor schlagen, weil seine Schicht später kommt. Händler-CSS geht in die früheste Schicht, und ein temporäres Override kann entfernt werden, ohne längere Selektoren zu hinterlassen. Design concept to apply: Kaskadenschichten (Cascade Layers). Why it fits: Lege eine gemeinsame Schichtreihenfolge für Resets, Abhängigkeiten, Komponenten, Hilfsprogramme und Produktüberschreibungen fest. Do not use it when: Erstellen Sie nicht für jede Komponente eine Ebene. Denken Sie auch daran, dass normale, nicht geschichtete Autorenregeln nach geschichteten Regeln kommen und diese übertreffen können. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Ein formelles Dokument kann trotzdem ein Entwurf, ein Release Candidate oder die finale Version sein. Prüfe seinen Status und die Browser- oder Plattform-Unterstützung. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Diese Anfrage prüfen
Review how Kaskadenschichten (Cascade Layers) is used now. Definition: Kaskadenschichten sind benannte Gruppen, die die Reihenfolge der CSS-Regeln festlegen. Der Browser überprüft diese Reihenfolge, bevor er die Spezifität der Selektoren vergleicht. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.