CSS-Philosophie

Hallo an alle! Es ist Zeit bekannt zu geben, dass wir vor Ende Februar ein neues CSS-Buch veröffentlichen wollen , das allen empfohlen wird, die MacFarland bereits beherrschen (solange es noch verfügbar ist, planen wir, den nächsten Überdruck im Januar zu machen).

Heute sind Sie eingeladen, einen Artikel von Keith Grant (veröffentlicht im Juni) zu übersetzen, in dem der Autor seinen Standpunkt zu CSS darlegt und tatsächlich erklärt, worüber er in seinem Buch sprechen wollte. Wir lesen und kommentieren!



Ich habe viel Zeit damit verbracht, darüber nachzudenken, was CSS-orientiertes Denken ist. Es scheint, dass einige es schaffen, es zu „lernen“, während andere es nicht tun. Ich denke, wenn ich klar artikulieren könnte, was diese Weltanschauung ist, würde das CSS selbst für diejenigen, die mit ihnen arbeiten, vielleicht verständlicher werden. Dies ist teilweise der Grund, warum ich mich hingesetzt und das Buch CSS for Professionals geschrieben habe.

Heute möchte ich dieses Problem noch einmal angehen. Betrachten Sie drei wichtige CSS-Funktionen, die diese Sprache von herkömmlichen Programmiersprachen unterscheiden. CSS ist persistent, deklarativ und kontextbezogen. Ich denke, dass das Verständnis dieser Aspekte der Sprache eine wichtige Voraussetzung ist, um ein CSS-Master zu werden.

CSS-beständig

Wenn Sie versehentlich einen Code in einer JavaScript-Datei löschen, stürzt die Anwendung oder Webseite, auf der sie verwendet wird, mit ziemlicher Sicherheit ab oder friert ein, und das Skript (oder sogar die gesamte Seite) schlägt fehl. Wenn Sie dasselbe in CSS tun, bemerken Sie möglicherweise nichts. Fast der gesamte andere Code mit Ausnahme des gelöschten Fragments funktioniert weiterhin ordnungsgemäß.

Diese Eigenschaft wird als Ausfallsicherheit bezeichnet. HTML und CSS wurden speziell mit der Erwartung der Fehlertoleranz entwickelt. Wenn ein Problem auftritt, gibt der Browser einen Fehler aus. Andernfalls wird dieser Teil des Codes einfach ignoriert und geht weiter.

Unter dem Gesichtspunkt des Debuggens mag dies absurd erscheinen: Wenn ein Programm keine Fehler auslöst, wie können wir dann herausfinden, dass etwas schief gelaufen ist? Dies ist jedoch der wichtigste Aspekt des CSS-Geräts. Es ist in den Stoff der Zunge selbst eingewebt. Ich gebe zu, es braucht Zeit, um sich daran zu gewöhnen. Sobald Sie dies verstanden haben, können Sie jedoch sicher die Funktionen verwenden, die nicht in allen Browsern unterstützt werden. Auf diese Weise wird die fortschreitende Entwicklung einer Site oder Anwendung sichergestellt.

Betrachten Sie dieses Beispiel mit einem Netzlayout. Es funktioniert sowohl in Browsern, die das Raster unterstützen, als auch in Browsern, die das Raster nicht unterstützen. In Browsern, in denen das Raster nicht unterstützt wird, ist das Layout leicht ungleichmäßig (die genauen Größen der Elemente können variieren), aber die Seite wird ungefähr so ​​angelegt, wie sie sollte:

.portfolio { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } .portfolio__item { display: inline-block; max-width: 600px; } 

Ein Browser, der die beiden Rasterdeklarationen nicht versteht, ignoriert sie und es ist möglich, die Arbeit dank anderer Regeln abzuschließen. Der Browser, der das Raster versteht, verwendet wiederum das Rasterlayout und ignoriert die Inline-Block-Deklaration (da das Raster auf diese Weise funktioniert). Jen Simmons nennt dieses Phänomen scherzhaft „ Quantum CSS “. Sie nutzen einige CSS-Funktionen und „verwenden und nicht gleichzeitig verwenden. Aber es funktioniert gleichzeitig und funktioniert nicht. “

Dieses Phänomen des „Sicherheitsverhaltens“ ist ein wesentlicher Bestandteil der Arbeit mit CSS, aber den meisten traditionellen Programmiersprachen fremd.

CSS deklarativ

In JavaScript schreiben wir spezifische Schritt-für-Schritt-Anweisungen, die beschreiben, wie das Programm zu einem Ergebnis kommen soll. In CSS teilen Sie dem Browser mit, was genau Sie auf dem Bildschirm sehen möchten, und der Browser findet einen Weg, dies zu tun. Das zu verstehen ist sehr wichtig. Wenn Sie dies lernen, wird CSS die ganze harte Arbeit für Sie erledigen. Wenn Sie dies nicht tun, werden Sie die Essenz von CSS in den Griff bekommen und immer wieder enttäuscht sein.

Wenn Sie CSS schreiben, richten Sie tatsächlich ein Einschränkungssystem ein. Wir geben dem Browser nicht an, wo sich die einzelnen Elemente auf der Seite befinden sollen, sondern informieren darüber, welche Einrückungen zwischen ihnen stehen sollen. Danach setzt der Browser selbst alles an seine Stelle. Sie teilen dem Browser nicht mit (zumindest sollten Sie nicht angeben), wie hoch der Container sein soll. Sie erlauben dem Browser, dies während der Anzeige selbst zu bestimmen, wenn er den Inhalt des Containers kennt, weiß, welche anderen Stile in diesem Kontext verwendet werden und wie breit das Ansichtsfenster ist.

Sie müssen zu viele Variablen berücksichtigen. Die Essenz von CSS besteht darin, den Prozess so zu organisieren, dass Sie sich nicht um all diese Variablen kümmern müssen. Definieren Sie ein System von Einschränkungen. Die Sprache selbst kümmert sich um die Details.

Einfaches Beispiel

Schauen wir uns ein solches CSS-Beispiel an: font-size: 2em . Was macht dieser Code? "Erhöht die Schriftgröße", sagen Sie. Das ist aber noch nicht alles. Außerdem wird die Silbentrennung von Textzeilen im Container korrigiert, da jetzt weniger Wörter in jede Zeile passen. Dementsprechend erhöht dies häufig die Anzahl der Textzeilen und erhöht auch die Höhe des Containers, so dass diese neuen Zeilen in ihn passen. Wenn Sie die Höhe des Containers ändern, wird der gesamte Text auf der Seite unter diesem Container entsprechend verschoben. Schließlich legt der obige Code auch den lokalen em Wert fest. Die Werte aller anderen Eigenschaften, die zur Bestimmung der em Einheiten verwendet wurden, müssen neu berechnet werden.

Allein diese Ankündigung erzeugt eine ganze Reihe von Änderungen auf der Seite. Und alle sind darauf ausgelegt, genau das zu erreichen, wonach Sie streben müssen: Der Inhalt passt immer auf die Seite, die Elemente überlappen sich nicht und alle Eigenschaften, die von der Größe der Schriftart abhängen, werden korrigiert (z. B. Einrückung). Sie müssen nicht über all diese Details nachdenken. Der Browser selbst führt alle oben genannten Berechnungen durch und führt dies standardmäßig durch.

Wenn Sie nicht möchten, dass dies geschieht, können Sie dies auch tun. Sie können die Höhe eines Containers mit den Eigenschaften max-height und overflow: auto stark einschränken. Sie können die inneren Ränder neu definieren, sodass sie in rem oder px Einheiten gemessen werden, px , sie werden nach der Schriftgröße nicht wiedergegeben. Dies zeigt einen interessanten Aspekt der Arbeit mit CSS: Manchmal sagt man dem Browser nicht, was er tun soll, sondern verbietet ihm tatsächlich, irgendetwas zu tun.

Vorteile des Netzes

Es gibt jedoch neue Funktionen in CSS, die noch cooler sind. Die häufigsten Beispiele sind Flexbox und Grid. Nur ein paar Ankündigungen - und Sie haben ein außergewöhnlich flexibles Netzlayout, das einfach funktioniert. Sie müssen sich nicht um zahlreiche Sonderfälle kümmern. Tatsächlich sagen Sie dem Browser: "Stapeln Sie diese Blöcke in Spalten mit einer Breite von jeweils 400 Pixel", und der Browser erledigt dies für Sie. Alles über alles erfordert ungefähr drei Codezeilen.

Wenn Sie dies unbedingt versuchen würden, müssten Sie sich mit vielen seltsamen Szenarien auseinandersetzen. Was ist, wenn einer der Blöcke ein zu langes Wort bekommt? Was ist, wenn das Ansichtsfenster zu eng ist? Und wenn es sehr breit ist? Was ist, wenn ein Element ein ganzes Inhaltsblatt und ein anderes nur wenige Wörter enthält? Es ist wahrscheinlich, dass Sie in CSS nicht darüber nachdenken müssen. Alles ist bereits für Sie durchdacht und in den Spezifikationen festgelegt, und der Browser folgt den Regeln für Sie. Dies ist die Kraft der deklarativen Sprache.

Dies ist natürlich nicht ohne Kompromisse. Wenn die deklarative Sprache keine der von Ihnen benötigten Funktionen unterstützt (z. B. "Brücke"), müssen Sie sich weiterhin auf Tricks des Großvaters oder auf JavaScript verlassen. Darüber hinaus widmet sich die Entwicklung von CSS seit vielen Jahren weitgehend dem Kampf gegen solche Dinge. Glücklicherweise können wir mit der Entwicklung von Flexbox und Grid viel mehr und ohne Hacks tun (ja, lose Elemente sind ein Hack). Wenn Ihnen in dieser Situation immer noch etwas fehlt, empfehle ich, über CSS Houdini zu lesen, das gerade erst anfängt, in Browsern Fuß zu fassen.

CSS ist kontextsensitiv

In der React-Ära haben wir einen äußerst praktischen Ansatz gewählt: die modulare komponentenbasierte Entwicklung. Es entspricht den Best Practices für CSS sowie BEM, SMACSS und CSS-in-JS. Ich möchte die Bedeutung all dieser Funktionen nicht herunterspielen, da sie eine Schlüsselrolle bei der Erstellung umfangreicher Anwendungen spielen. Ich denke jedoch, dass es ebenso wichtig ist zu erkennen, dass CSS nicht 100% modular ist und nicht modular sein sollte.
Dafür gibt es zwei Gründe. Die erste und offensichtlichste - die Anwendung sollte in globalen Stilen gestaltet sein. Fast immer müssen Sie das Headset und die Schriftgröße auf Seitenebene einstellen, die standardmäßig verwendet werden. Danach werden diese Werte von allen untergeordneten Elementen geerbt, die sie nicht explizit überschreiben. Außerdem müssen einige Aspekte Ihres Designs systematisch auf der gesamten Seite angewendet werden: Farbthema, Rundungsradien für Blöcke, Blockschattierung und Gesamtrandgrößen. Weitere lokale Stile, die in Teilen der Seite wirken, werden im Kontext dieser globalen Stile angewendet.

Der zweite, subtilere Grund ist, dass sowohl CSS als auch Ihre Entwurfsentscheidungen vom Kontext der Seite abhängen. Angenommen, wir wenden die folgenden CSS-Stile auf ein Element auf einer Seite an:

 .the-thing { position: absolute; top: 10px; left: 10px; } 

Was wird dieser Code tun? Da wir nicht genau wissen, wo sich dieses Element im DOM befindet und welche Stile auf dem Rest der Seite angewendet werden, können wir diese Frage nicht beantworten. Die absolute Platzierung erfolgt relativ zum nächstgelegenen Vorfahrenelement. Diese Positionierung hängt davon ab, welche Art von Vorfahren in Frage kommt und welche Art von Platzierung darauf angewendet wurde.

Darüber hinaus hängt Ihre Fähigkeit (oder Unmöglichkeit), Elemente übereinander zu legen, weitgehend davon ab, wo sich diese beiden Elemente im DOM befinden. Das Mischen von Elementen im DOM kann das Layout von Elementen und deren Überlappung erheblich beeinflussen. Aus diesem Grund sind der Dokumentenfluss und die Überlagerungskontexte grundlegende (wenn auch manchmal komplexe) Themen.

Der kontextbezogene Charakter von CSS ist teilweise darauf zurückzuführen, dass das Design so funktioniert. Wenn ein Ingenieur eine Brücke entwirft, können Sie sich nicht nur die Zeichnung ansehen und sagen: "Alles ist in Ordnung, aber ich mag diesen Balken nicht. nimm sie weg. " Wenn Sie einen Balken entfernen, wirkt sich dies auf die strukturelle Einheit der gesamten Brücke aus. Ändern Sie in ähnlicher Weise einfach ein beliebiges Designelement - und alle anderen Elemente auf dem Bildschirm werden anders wahrgenommen. Oft ist es notwendig, mehrere Elemente gleichzeitig in enger Einheit miteinander zu zeichnen.

Wenn Sie beispielsweise den Titel auf einer der Kacheln erhöhen, wird dies für den Benutzer deutlicher, und aus diesem Grund scheinen andere Elemente auf dem Bildschirm weniger wichtig zu sein. Hier liegen die Grenzen nicht in der Ebene der Physik, wie beim Bau der Brücke; Wir sprechen über mehr "humanitäre" Gesetze, die die menschliche Wahrnehmung beeinflussen. Elemente der Seite werden auf dem Bildschirm reflektiert, der seine eigenen physikalischen Eigenschaften hat. Bei der Arbeit ist es notwendig, die Realitäten der physischen Welt und ihre Wahrnehmung zu berücksichtigen.

Wie Sie wissen, unterliegt die Softwarearchitektur den Prinzipien der Modularität und Kapselung . Dieser Ansatz ist auf Codeebene gerechtfertigt, da der Code komplex ist und Sie mit der beschriebenen Methode das Problem in verdauliche Fragmente aufteilen können. Es sollte jedoch berücksichtigt werden, dass dieser Ansatz nicht perfekt ist. In CSS können Sie niemals vollständig ignorieren, was in einem bestimmten Modul geschieht.

Zusammenfassung

Die drei beschriebenen Aspekte unterscheiden CSS von herkömmlichen Programmiersprachen. Diese Unterschiede passen möglicherweise nicht sofort in Ihren Kopf, aber sie sind die mächtigsten Aspekte von CSS. Ich möchte vorschlagen, dass Entwickler, die es schaffen, diese Prinzipien zu verstehen und richtig zu verstehen, echte Höhen in CSS erreichen.