CSS ist eine stark getippte Sprache

Eine Art und Weise, wie Sie eine Programmiersprache klassifizieren können, besteht darin, wie stark oder schwach tippt sie ist. Hier bedeutet „Typed“, wenn Variablen zur Kompilierungszeit bekannt sind. Ein Beispiel hierfür wäre ein Szenario, in dem eine Ganzzahl (1) zu einer Zeichenfolge hinzugefügt wird, die eine Ganzzahl ("1") enthält:

 Ergebnis = 1 "1";

Die Zeichenfolge, die eine Ganzzahl enthält, hätte ungewollt aus einer komplizierten Logik -Reihe mit vielen beweglichen Teilen erzeugt werden können. Es könnte auch absichtlich aus einer einzelnen Quelle der Wahrheit erzeugt worden sein.

Trotz der Konnotationen, die die Begriffe „schwach“ und „stark“ implizieren, ist eine stark typische Programmiersprache nicht unbedingt besser als eine schwach typische. Es kann Szenarien geben, in denen Flexibilität mehr als Starrheit und umgekehrt erforderlich ist. Wie bei vielen Aspekten der Programmierung hängt die Antwort von mehreren externen Kontexten ab (dh „es hängt davon ab“).

Das andere interessante Bit ist, dass es keine formale Definition dessen gibt, was eine starke oder schwache Typisierung ausmacht. Dies bedeutet, dass die Wahrnehmung dessen, was als stark oder schwach typische Sprache angesehen wird, von Person zu Person unterscheidet und sich im Laufe der Zeit ändern kann.

Typoskript

JavaScript wird als schwach typische Sprache angesehen, und diese Flexibilität hat zu ihrer frühen Einführung im Internet beigetragen. Da das Web jedoch gereift und industrialisiert ist, sind Anwendungsfälle für JavaScript komplizierter geworden.

Es wurden Erweiterungen wie TypeScript erstellt, um dabei zu helfen. Stellen Sie sich es als „Plugin“ für JavaScript vor, das stark auf die Sprache tippt. Dies hilft den Programmierern, komplizierte Setups zu navigieren. Ein Beispiel hierfür könnte eine datenintensive einseitige Anwendung sein, die für den E-Commerce verwendet wird.

TypeScript ist derzeit in der Webentwicklungsindustrie sehr beliebt, und viele neue Projekte verwenden die Verwendung von TypeScript, wenn Sie zunächst die Dinge einrichten.

Zeit kompilieren

Die Kompilierzeit ist der Moment, in dem eine Programmiersprache in den Maschinencode umgewandelt wird. Es ist ein Vorläufer der Laufzeit, der Moment, in dem der Computercode vom Computer ausgeführt wird.

Wie bei vielen Dingen im Internet ist Compile Time etwas schwierig. Ein Setup, das TypeScript verwendet, nähert Komponentenstücke von JavaScript -Code und kompilieren sie in eine einzelne JavaScript -Datei, damit der Browser lesen und ausführen kann.

Die Zeit, in der Komponentenstücke kompiliert werden, ist, wenn sie alle kombiniert werden. TypeScript dient als eine Art Aufseher und schreibt Sie an, wenn Sie versuchen, die typisierten Konventionen zu brechen, die Sie vor der Kombination für sich selbst eingerichtet haben.

Die getroffene JavaScript-Datei wird dann vom Browser aufgenommen, der eine eigene Kompilierungszeit hat. Die Browser -Kompilierungszeit ist je nach:

• Das Gerät, auf dem der Browser eingeschaltet ist,
• Welche andere Arbeit der Browser leistet und
• Was andere Arbeiten der anderen Programme des Geräts tun?

TypeScript wird nicht direkt vom Browser verwendet, aber seine Anwesenheit ist zu spüren. JavaScript ist zerbrechlich. TypeScript hilft bei dieser Fragilität, indem versucht wird, Fehler im Code -Editor zu verhindern. Dies verringert die Zufallsfehler im vom Browser gelesenen JavaScript - Fehler, die dazu führen würden, dass JavaScript die Funktionsweise auf der Website oder auf Web -App, die eine Person verwendet, eingestellt wird.

CSS

CSS ist eine deklarative, domänenspezifische Programmiersprache. Es wird auch stark tippt. Zum größten Teil bleiben die Werte in CSS als verfasst deklariert. Wenn ein Wert ungültig ist, wirft der Browser die gesamte Eigenschaft weg.

Typen in CSS

Die Liste der Typen in CSS ist gründlich. Sie sind:

Texttypen

• Global gescopte Schlüsselwörter:
  • anfänglich
  • erben
  • ungehindert
  • zurückkehren
• Benutzerdefinierte Identifikationen, die speziell für Dinge verwendet werden, z. B. für die Bereitstellung eines Namens der Gitterfläche
• Saiten wie "Hallo"
• URLs wie https://css-tricks.com/
• Gestrichelte Identen (-), die verwendet werden, um benutzerdefinierte Eigenschaften zu erstellen (mehr dazu in etwas)

Numerische Typen

• Ganzzahlen, die Dezimalzahlen 0–9 sind
• Reelle Zahlen wie 3.14
• Prozentsätze wie 25%
• Abmessungen, eine Zahl mit einem angehängten Gerät wie (100px oder 3s)
• Verhältnisse wie 16/9
• Flex, eine variable Länge für die Berechnung des CSS -Gitters

Mengentypen

• Längen:
  • Absolute Längen wie Pixel oder Zentimeter
  • Relative Längen wie Wurzel -EMS oder die Ansichtsfensterhöhe
  • Zeit wie 200 ms
• Winkel wie 15 Grad
• Zeit, wie 250 ms
• Frequenzen, wie 16Hz
• Auflösung wie 96DPI

Abmessungen und Längen mögen ähnlich erscheinen, aber Dimensionen können Prozentsätze und Längen nicht enthalten.

Farbtypen

• Schlüsselwörter:
  • Genannte Farben wie Papayawhip
  • transparent
  • CurrentColor
• RGB -Farben:
  • Hexidezimalnotation wie #ff8764
  • RGB/RGBA -Notation wie RGBA (105, 221, 174, 0,5)
• HSL/HSLA -Farben wie HSL (287, 76%, 50%)
• Systemfarben wie ButtonText

Bildtypen

• Bild, das eine URL -Referenz auf eine Bilddatei oder einen Abschluss ist
• Farbstop-Liste, eine Liste von zwei oder mehr Farbstopps, die für den Gradientenbegriff verwendet werden
• linearer Farbtop, eine Farb- und Längexpression, die verwendet wird, um einen Gradientenfarbe anzuzeigen
• linearer Farbtupfer, ein Längeanteil, der zur Interpolierung der Farbe verwendet wird
• Endform, das ein Schlüsselwort von Kreis oder Ellipse für Radialgradienten verwendet

2D -Positionierungstypen

• Schlüsselwörter:
  • Spitze
  • Rechts
  • unten
  • links
  • Center
• Eine prozentuale Länge wie 25%

Programmierung in CSS

Der Großteil der Programmierung in CSS ist die Autorierungsauswahl und gibt dann eine Reihe von Eigenschaften und deren erforderlichen Werten an. Sammlungen von Selektoren geben Inhalten eine visuelle Form, genau wie Sammlungen der JavaScript -Logik Funktionen.

CSS hat Funktionen. Es kann Berechnung, bedingte Logik, algorithmische Ausdrücke, Zustand und modebasiertes Verhalten durchführen. Es hat auch benutzerdefinierte Eigenschaften, die effektiv CSS -Variablen sind, mit denen die Werte dynamisch aktualisiert werden können. Heck, Sie können sogar Fizzbuzz mit CSS lösen.

Wie bei anderen Programmiersprachen gibt es auch eine „Meta“ -Schicht mit unterschiedlichen Gedanken und Techniken, wie man Dinge organisiert, verwaltet und verwaltet.

Fehler werfen

Im Gegensatz zu anderen Programmiersprachen, in denen Code weitgehend unter der Haube existiert, ist CSS sehr visuell. Sie werden keine Warnungen oder Fehler in der Konsole sehen, wenn Sie einen ungültigen Wert für eine Eigenschaftserklärung verwenden. Sie erhalten jedoch Visuals, die nicht die Art und Weise aktualisieren, wie Sie es erwartet haben.

Der Grund dafür ist, dass CSS belastbar ist. Wenn Visuals aufgrund einer missverstandenen Erklärung nicht aktualisiert werden, priorisiert CSS und stellt sicher, dass Inhalte um jeden Preis angezeigt werden können , und wird jede andere gültige Erklärung abgeben, die sie möglicherweise kann. Dies entspricht den Designprinzipien der Sprache, den Prinzipien der Plattform und den übergreifenden Zielen der Mission des Webs.

Nachweisen

Lassen Sie uns demonstrieren, wie stark das Tippen in CSS in drei Beispielen eingeschaltet hält: eine mit einer einfachen Eigenschaft/Werterklärung, eine mit Berechnung und eine mit einer neu definierten Eigenschaft.

Beispiel 1: Unkomplizierte Eigenschaft/Werterklärung

In diesem Beispiel versteht der Browser die Erklärung des Banner-Grenzstils „Kartoffel“ nicht. Beachten Sie, dass die andere .Banner-Klasse-Selektor-Eigenschaft/-wert-Deklarationen vom Browser geehrt und wiedergegeben werden, obwohl das Grenzstil über eine Typfehlanpassung verfügt. Dies ist ein Beispiel dafür, wie belastbar CSS ist.

Die Erklärung im Grenzstil erwartet einen der folgenden Textstiltypen:

• Weltweit gescopte Schlüsselwörter oder a
• Gestrichelten Einrückung für eine benutzerdefinierte Eigenschaft.

Wenn wir den Border-Stil aktualisieren, um einen gültigen, eingegebenen Wert von gepunktet zu verwenden, rendert der Browser die Grenze!

Beispiel 2: Berechnung

Mit der Funktion calc () in CSS können wir zwei Argumente und einen Bediener einberufen, um ein berechnetes Ergebnis zurückzugeben. Wenn eines der Argumente keinen gültigen Typ verwendet, funktioniert die Berechnung nicht.

In diesem Stift erwartet die Eigenschaft des P-Selektors einen Wert mit einem numerischen Dimensionstyp (z. B. 1,5REM). Die Berechnungsfunktion erzeugt jedoch einen ungültigen Typwert für die Eigenschaft mit Schriftgröße. Dies liegt daran, dass das zweite Argument in der Funktion calc () eine Zeichenfolge ("2REM") und kein numerischer Dimensionstyp ist.

Aus diesem Grund fällt die Schriftgröße des Absatzes auf den nächsten anwendbarsten übergeordneten Knoten zurück-die auf das Körperelement deklarierte Schriftgröße von 1,5Rem.

Dies ist ein bisschen im Unkraut, aber es lohnt sich, darauf hinzuweisen: Die Kombination von zwei benutzerdefinierten Eigenschaften in einer Calc () -Funktion kann Fehler verursachen. Während beide benutzerdefinierten Eigenschaften für sich genommen gültig sind, akzeptiert Calc () gestrichelte Einklang -Texttypen nicht. Denken Sie an ein Szenario, in dem wir versuchen könnten, benutzerdefinierte Eigenschaften zu multiplizieren, die nicht übereinstimmende Einheiten enthalten, z. B. BIG: 500px und - -Small: 1EM.

Beispiel 3: Neudefinierte benutzerdefinierte Eigenschaft neu definiert

Wie JavaScript -Variablen können benutzerdefinierte Eigenschaftswerte neu definiert werden. Diese Flexibilität ermöglicht Dinge wie das Erstellen von Dark -Modus -Farbthemen.

In der: Root Selector dieses Codepen habe ich eine benutzerdefinierte Eigenschaft von-color-cyan mit einem Wert von #953FE3 festgelegt. In der .quare-Klasse habe ich dann den Wert der Color-Cyan Custom Property aktualisiert, um oben zu sein. Obwohl Top ein gültiger, typisierter Wert ist, ist es kein Typ, der die Hintergrundfarbe auszeichnet.

Beachten Sie, dass die aktualisierte benutzerdefinierte Eigenschaft auf .quare skopiert ist und andere Verwendungen nicht beeinflusst, z. Und wenn Sie die neu definierte benutzerdefinierte Eigenschaft von .quare entfernen, werden Sie sehen, wie die Cyan -Hintergrundfarbe wieder einnimmt.

Dies ist zwar ein bisschen erfunden, dient zwar als Beispiel dafür, wie die Neudefinition benutzerdefinierter Eigenschaften von Ihnen wegkommen kann, wenn Sie nicht vorsichtig sind.

Dieses Phänomen befindet sich in Projekten mit schlechter Kommunikation, größeren CSS -Codebasen und Situationen, in denen CSS -Präprozessoren verwendet werden, um benutzerdefinierte Eigenschaften im Maßstab zu erstellen.

Werkzeug

Ich denke, ein Mangel an Konsolenwarnungen für CSS ist ein Fehler und hat zu vielen negativen Wahrnehmungen der Sprache beigetragen.

Zu hoffen, dass ein Entwickler eine potenziell winzige visuelle Veränderung bemerkt, ist zu groß und trifft sie nicht dort, wo sie für die meisten anderen täglichen Werkzeuge sind. Es gibt einige Initiativen, die mir dessen bewusst sind, dass versucht wird, dies anzugehen.

Zunächst ist Stylelint, ein Linter, der speziell mit CSS und CSS-ähnlichen Vorverarbeitungssprachen umgeht. Stylelint kann sich in Code -Editoren, Taskläufer, Befehlszeilen -Tools und GitHub -Aktionen integrieren, um Ihr CSS unter Kontrolle zu halten. Dies ermöglicht es ihm, Entwickler dort zu treffen, wo sie sich bereits befinden.

Zweitens ist Firefoxs hervorragende Suite von CSS -Inspektionsoptionen in den Entwicklerwerkzeugen. Insbesondere möchte ich auf seine Fähigkeit aufmerksam machen, nicht verwendete CSS zu identifizieren. Dies ist äußerst hilfreich, um Selektoren zu identifizieren, die möglicherweise nicht an einer Art Fehlanpassung betrieben werden.

Einpacken

CSS wurde stark tippt, solange es sich um eine Programmiersprache handelt, und als Programmiersprache gibt es es schon lange. Es hat auch in letzter Zeit viel gemacht. Wenn Sie nicht eingecheckt haben, stehen einige neue, erstaunliche Funktionen zur Verfügung.

Ich hoffe, dass JavaScript, das von JavaScript stärker wird, die Entwickler hilft, sich mit dem festen, aber flexiblen Ansatz von CSS wohler zu fühlen.

Vielen Dank an Miriam Suzanne für ihr Feedback.

Das obige ist der detaillierte Inhalt vonCSS ist eine stark getippte Sprache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!