Methoden und Werkzeuge zur Entwicklung von Webseitenstilen

Lassen Sie uns nicht um den heißen Brei herumreden, seien wir ehrlich: Der Prozess des Schreibens von gutem CSS-Code kann sehr, sehr schwierig sein. Viele Entwickler wollen sich nicht mit Stilen anlegen. Sie sind zu allem bereit, aber nicht zu CSS.



Der Autor des Materials, auf dessen Übersetzung wir Sie heute aufmerksam machen, sagt, dass ihm selbst der Teil der Webentwicklung, der sich auf CSS bezieht, nicht gefallen hat. Aber daran führt kein Weg vorbei. Heutzutage wird dem Design und der sogenannten "Benutzererfahrung" große Aufmerksamkeit gewidmet, aber Sie können nicht auf CSS verzichten. Der Zweck dieses Materials ist es, jedem zu helfen, seine Fähigkeiten bei der Entwicklung und Anwendung von Webseitenstilen zu verbessern.

CSS-Probleme

Zu Beginn eines neuen Projekts sehen Stile normalerweise einfach und klar aus. .title , es gibt nur sehr wenige CSS-Selektoren wie .title , input , #app , mit denen nicht schwer zu arbeiten sein wird.

Aber wenn die Anwendung wächst, werden Stile zu einem Albtraum. Der Entwickler beginnt sich über CSS-Selektoren zu verwirren. Er entdeckt, dass er so etwas wie div#app .list li.item a schreibt. Die Arbeit kann jedoch nicht gestoppt werden, sodass der Programmierer weiterhin ähnliche Konstruktionen verwendet. Der CSS-Code wird irgendwo am Ende der Datei verschoben. Und wirklich - wer interessiert sich für Stile? Und CSS selbst ist so ein Unsinn ... Das Ergebnis sind 500 Zeilen völlig nicht unterstütztes, schreckliches CSS.

Ich möchte, dass Sie diesen Artikel lesen und sich Ihre vorherigen Projekte ansehen und denken: "Nun, wow, wie könnte ich das schreiben?"

Vielleicht denken Sie jetzt, dass „CSS schreiben“ die Verwendung von CSS-Frameworks bedeutet. Schließlich sollen sie genau die Arbeit mit Stilen erleichtern, und mit ihrer Verwendung schreiben sie guten CSS-Code. All dies ist wahr, aber CSS-Frameworks haben bestimmte Nachteile:

• Oft führt ihre Verwendung zum Auftreten eines langweiligen, eintönigen, banalen Designs.
• Es ist schwierig, die Stile der Frameworks anzupassen, und die Notwendigkeit, etwas zu tun, das über das Framework des Frameworks hinausgeht, kann zu Schwierigkeiten führen.
• Das Framework muss vor der Verwendung untersucht werden.

Und am Ende lesen Sie dies nicht, um sich mit einem bestimmten Rahmen vertraut zu machen? Lassen Sie uns also CSS erledigen. Ich möchte sofort darauf hinweisen, dass es bei dem Material nicht darum geht, schöne Designs für Anwendungen zu erstellen. Es geht darum, wie man qualitativ hochwertiges CSS schreibt, das einfach zu warten ist, und wie man es richtig organisiert.

SCSS

In meinen Beispielen werde ich SCSS verwenden . Dies ist ein CSS-Präprozessor. Tatsächlich ist SCSS eine Obermenge von CSS. Es hat einige sehr interessante Funktionen, wie Variablen, verschachtelte Konstruktionen, Dateiimport, Mixins. Wir werden die SCSS-Funktionen diskutieren, die wir verwenden werden.

▍Variablen

In SCSS können Sie Variablen verwenden. Der Hauptvorteil der Verwendung von Variablen ist die Möglichkeit ihrer Wiederverwendung. Stellen Sie sich vor, wir haben eine Reihe von Farben für die Anwendung. Die Hauptfarbe ist blau. Infolgedessen wird diese Farbe buchstäblich überall angewendet. Es wird in der background-color Eigenschaft von Schaltflächen, in der color des Seitentitels und an vielen anderen Stellen verwendet.

Und dann entscheiden Sie sich plötzlich, Blau in Grün zu ändern. Wenn Sie eine solche Ersetzung ohne Verwendung von Variablen durchführen, müssen Sie den gesamten Code und alle Zeilen bearbeiten, in denen die alte Farbe verwendet wird. Wenn Sie eine Variable verwenden, müssen Sie nur ihren Wert ändern. So sieht die Verwendung von Variablen aus:

 //   $primary-color: #0099ff; //   h1 { color: $primary-color; } 

▍ Verschachtelte Konstruktionen

SCSS unterstützt verschachtelte Konstruktionen. Hier ist reguläres CSS:

 h1 { font-size: 5rem; color: blue; } h1 span { color: green; } 

Dank der Unterstützung verschachtelter Konstruktionen kann es wie folgt transformiert werden:

 h1 { font-size: 5rem; color: blue; span {   color: green; } } 

Diese Option ist viel einfacher zu lesen, oder? Darüber hinaus wird durch die Verwendung verschachtelter Konstruktionen die Zeit zum Erstellen komplexer Selektoren reduziert.

▍Fragmentierung und Import

Wenn es um die Unterstützung von Stilen und deren Lesbarkeit geht, wird deutlich, dass es unmöglich ist, den gesamten Code in einer Datei zu speichern. Eine Style-Datei kann für experimentelle Zwecke oder bei der Entwicklung einer kleinen Anwendung verwendet werden. Wenn Sie jedoch ein professionelles Niveau erreichen, ist es besser, es nicht einmal zu versuchen. Zum Glück verfügt SCSS über Mechanismen zum bequemen Organisieren von Stilcode.

Dateien, die Fragmente von Stilbeschreibungen enthalten, können durch Hinzufügen eines Unterstrichs am Anfang ihres Namens erstellt werden: _animations.scss , _base.scss , _variables.scss usw.

Die @import Direktive wird zum Importieren dieser Dateien verwendet. So verwenden Sie diesen Mechanismus:

 //  _animations.scss @keyframes appear { 0% {   opacity: 0; } 100% {   opacity: 1; } } //  header.scss @import "animations"; h1 { animation: appear 0.5s ease-out; } 

Möglicherweise liegt ein Fehler in diesem Code vor. In der Tat heißt die Datei, die wir importieren _animations.scss , _animations.scss , und wir verwenden in der Datei @import "animations" Befehl @import "animations" . Es gibt jedoch keinen Fehler. SCSS ist intelligent genug, um zu verstehen, dass der Entwickler in einer solchen Situation die entsprechende Datei meint.

Dies ist alles, was wir über Variablen, verschachtelte Konstruktionen, Fragmentierung von Stilen und Import wissen müssen. Es gibt andere Möglichkeiten in SCSS, wie Mixins, Vererbung und andere Anweisungen (darunter @for , @if und einige andere), aber wir werden hier nicht darauf @if .

Wenn Sie SCSS besser kennenlernen möchten, lesen Sie die entsprechende Dokumentation .

CSS-Organisation: BEM-Methodik

Ich kann mich nicht erinnern, wie oft ich universelle Begriffe für die Benennung von CSS-Klassen verwendet habe. Als Ergebnis habe ich solche Namen bekommen, die wohl jedem bekannt sind: .button , .page-1 , .page-2 , .custom-input .

Oft wissen wir einfach nicht, wie wir bestimmte Entitäten benennen sollen. Aber es ist sehr wichtig. Was wäre, wenn Sie die Anwendung entwickeln und dann aus irgendeinem Grund die Arbeit um mehrere Monate verschieben würden? Oder, und das ist viel schlimmer, was wäre, wenn jemand anderes dieses Projekt übernehmen würde? Wenn der CSS-Code unangemessene Namen verwendet, ist es schwierig zu verstehen, ohne andere Teile der Anwendung zu analysieren.

Die BEM-Methodik (Block, Element, Modifier) ​​ist ein Komponentenansatz für die Webentwicklung. Dies ist insbesondere eine Entitätsbenennungskonvention. Mit dieser Methode können Sie den Code strukturieren, ihn in Module aufteilen und ihn wiederverwenden. Lassen Sie uns über Blöcke, Elemente und Modifikatoren sprechen.

▍ Blöcke

Blöcke können als Komponenten betrachtet werden. Sicher hast du als Kind in Lego gespielt. Schalten Sie daher die Zeitmaschine ein.

Wie haben Sie zum Beispiel ein gewöhnliches Haus gebaut? Hier benötigen Sie ein Fenster, ein Dach, eine Tür, Wände, und im Allgemeinen ist dies ausreichend. All dies sind unsere Blöcke. Sie sind an sich bedeutsam.

Benennung: .block - .block

Beispiele: .card , .form , .post , .user-navigation

▍ Elemente

Wie erstelle ich ein Lego-Fenster? Wahrscheinlich sehen einige Würfel wie Rahmen aus. Wenn Sie also vier dieser Würfel verbinden, erhalten Sie ein schönes Fenster. Dies sind die Elemente. Sie sind Teile von Blöcken, wir brauchen sie, um Blöcke zu erstellen. Elemente außerhalb von Blöcken sind jedoch nutzlos.

Benennung: .block__element + __ + - .block__element

Beispiele: .post__author , .post__date , .post__text

▍ Modifikatoren

Nachdem Sie ein Fenster haben, möchten Sie es möglicherweise ändern. Zum Beispiel - malen Sie in einer anderen Farbe. Solche Änderungen an den Basisblöcken oder Elementen werden unter Verwendung von Modifikatoren durchgeführt. Hierbei handelt es sich um Flags von Blöcken oder Elementen, mit denen das Verhalten, das Erscheinungsbild usw. geändert werden.

Benennung: .block__element--modifier + -- + - .block__element--modifier , .block--modifier
Beispiele: .post--important , .post__btn--disabled

▍ Hinweise

• Bei Verwendung von BEM werden Namen ausschließlich Klassen zugewiesen. Keine IDs oder Tags - nur Klassen.
• Blöcke oder Elemente können in anderen Blöcken oder Elementen verschachtelt sein, müssen jedoch vollständig unabhängig sein. Es ist sehr wichtig. Daher müssen Sie der Schaltfläche beispielsweise keine Felder zuweisen, da Sie sie unter der Überschrift platzieren möchten. Andernfalls wird die Schaltfläche der Überschrift zugeordnet. Verwenden Sie stattdessen Hilfsklassen.
• Bei Anwendung der BEM-Methode werden HTML-Dateien mit Namen überladen. Dies ist jedoch eine geringe Gebühr für die von BEM bereitgestellten Funktionen.

▍Übung

Hier ist eine Übung. Schauen Sie sich die Sites, die Ihnen gefallen oder die Sie am häufigsten verwenden, genau an und überlegen Sie, was ein Block auf ihnen sein kann, was ein Element ist und was ein Modifikator ist.

Folgendes habe ich beispielsweise aus der Analyse des Google Store erhalten.


Standortanalyse

Jetzt bist du dran. Schauen Sie sich die Website an und überlegen Sie, wie sie verbessert werden kann. Um sich in einem bestimmten Bereich zu entwickeln, muss eine Person unabhängig nach Informationen suchen, experimentieren und etwas Neues schaffen.

▍ Beispiele

Hier ist ein von Codepen erstelltes Beispiel, das die Funktionen von BEM demonstriert. Hier machen wir so etwas wie das Veröffentlichen in einem bestimmten Blog. Hier ist der HTML-Code für dieses Beispiel.

 <div class="post"> <span class="post__author">Thomas</span>     <span class="post__date">3 minutes ago</span> <p class="post__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam sit voluptatem aut quis quisquam veniam delectus sequi maxime ullam, inventore blanditiis quia commodi maiores fuga, facere quaerat doloremque in. Nisi!</p> </div> <div class="post mt-large post--important"> <span class="post__author">Thomas</span>     <span class="post__date">2 hours ago</span> <p class="post__text">Voluptatem incidunt autem consequatur neque vitae aliquam, adipisci voluptatum. Ipsum excepturi dolores exercitationem rem ab similique consequatur nesciunt, tempora aut vel unde.</p> </div> 

Hier sind die SCSS-Stile:

 .post { display: inline-block; padding: 1rem; background-color: #ccc; border: 1px solid #222; border-radius: 5px; &--important {   background-color: yellow; } &__author {   font-size: 1.2rem;   font-weight: bold;   color: blue; } &__date {   float: right; } &__text {   line-height: 2rem;   font-size: 1.3rem; } } .mt-large { margin-top: 3rem; } 

Aber was ist am Ende passiert?


Erstellen von "Veröffentlichungen" mit BEM

Betrachten Sie ein anderes Beispiel . Hier erkennen wir mit BEM die Schaltflächen. Hier ist der HTML-Code für dieses Beispiel.

 <div> <button class="btn">   Click me </button> <button class="btn btn--danger">   Danger </button> <button class="btn btn--success">   Success </button> <button class="btn btn--small">   Small </button> <button class="btn btn--big">   Big </button> <button class="btn btn--border">   Border </button> </div> 

Hier sind die SCSS-Stile.

 .colors { font-size: 1.5rem; font-family: sans-serif; } .btn {   background-color: #FF6B93;   color: #fff;   text-transform: uppercase;   padding: 1.5rem 2.5rem;   border-radius: 4px;   transition: all .2s;   font-size: 1.3rem;   border: none;   letter-spacing: 2px;   cursor: pointer; &:hover {   background-color: #D15879; } &:focus {   outline: none; } &--danger {   background-color: #FF3B1A;     &:hover {     background-color: #D43116;   } } &--success {   background-color: #00D123;     &:hover {     background-color: #00AB1D;   } } &--small {   padding: 1rem 2rem;   font-size: 1rem; } &--big {   padding: 1.8rem 4.5rem;   font-size: 1.7rem; } &--border {   background-color: #fff;   color: #FF6B93;   border: 1px solid #FF6B93;     &:hover {     background-color: #FF6B93;     color: #fff;   } } } 

Und hier ist das Ergebnis.


Schaltflächendesign unter Verwendung der BEM-Methodik

Organisieren von CSS-Dateien: Die 7-1-Vorlage

Lassen Sie uns über das Organisieren von CSS-Dateien sprechen. Was Sie aus diesem Teil unseres Gesprächs lernen, ermöglicht es Ihnen, produktiver zu arbeiten und in geeigneten Situationen sofort den CSS-Code zu finden, der geändert werden muss. Um all dies zu erreichen, müssen wir die Vorlage "7-1" studieren.

Vielleicht scheint es Ihnen jetzt, dass diese Vorlage irgendwie zu seltsam genannt wird. Hier ist jedoch nichts Seltsames und die Verwendung ist sehr einfach. Dazu genügt es, zwei einfache Regeln zu beachten:

1. Alle Dateien mit SCSS-Fragmenten müssen in 7 verschiedenen Ordnern abgelegt werden.
2. Alle diese Dateien müssen in eine Datei, main.scss , importiert werden, die sich im Stammverzeichnis befindet, in dem sich alle diese Ordner befinden.

Der Name der Vorlage kann daher als "7 Ordner - 1 Datei" entschlüsselt werden. Wie Sie sehen, ist es nicht so schwierig. Lassen Sie uns näher auf diese Vorlage eingehen.

▍ 7 Ordner

Hier sind die fraglichen Ordner:

1. base : In diesen Ordner müssen Sie sozusagen den gesamten "Vorlagen" -Code einfügen. Mit "Vorlagen" -Code ist hier der gesamte CSS-Code gemeint, den Sie beim Erstellen eines neuen Projekts schreiben müssen. Zum Beispiel: typografische Regeln, Animationen, Dienstprogramme (dh Klassen wie margin-right-large , text-center ) und so weiter.
2. components : Der Name dieses Ordners gibt deutlich an, was darin gespeichert wird. Wir sprechen über die Stile von Komponenten, die zum Erstellen von Seiten verwendet werden. Dies sind Schaltflächen, Formulare, alle Arten von Schiebereglern, Popups usw.
3. layout : In diesem Ordner werden die Stile von Seitenlayoutelementen gespeichert. Dies ist die Kopf- und Fußzeile der Seite, der Navigationsbereich, verschiedene Abschnitte der Seite, das Raster usw.
4. pages : Manchmal benötigt ein Projekt Seiten mit einem eigenen Stil, der sich vom Stil anderer Seiten unterscheidet. Stilbeschreibungen für solche speziellen Seiten fallen hier in diesen Ordner.
5. themes : Wenn in einem Webprojekt verschiedene Themen verwendet werden (z. B. "Dunkler Modus" oder "Admin"), sollten hier Stile für sie eingefügt werden.
6. abstracts : In diesen Ordner gelangen alle möglichen Hilfsmittel - Funktionen, Variablen, Mixins.
7. vendors : Eine seltene Site ohne externe Abhängigkeiten. Dieser Ordner enthält Stile, die nicht von denjenigen erstellt wurden, die eine bestimmte Site entwickeln. Hier können Sie beispielsweise die Font Awesome-Projektdateien, Bootstrap-Stile und dergleichen speichern.

▍Datei main.scss

In dieser Datei werden alle Fragmente von Stilen importiert, die in den oben genannten sieben Ordnern angeordnet sind. Einige dieser Dateien könnten folgendermaßen aussehen:

 @import abstracts/variables; @import abstracts/functions; @import base/reset; @import base/typography; @import base/utilities; @import components/button; @import components/form; @import components/user-navigation; @import layout/header; @import layout/footer; 

Ich kann der Tatsache nicht zustimmen, dass dieses gesamte Design von sieben Ordnern ziemlich groß aussieht. Es ist jedoch zu beachten, dass diese Architektur für große Projekte konzipiert ist. Für kleine Projekte können Sie die angepasste Version der Vorlage "7-1" verwenden. Die Merkmale dieser Version sind, dass sie auf einige Ordner verzichten kann. Hier können Sie also den vendors ablehnen, indem Sie im link Tag Links zu Stylesheets außerhalb des Projekts platzieren. Außerdem können Sie auf den themes , da die Themen wahrscheinlich nicht in einer kleinen Webanwendung verwendet werden. Und schließlich können Sie den pages entfernen, da es in diesem Projekt höchstwahrscheinlich keine Seiten gibt, deren Stil sich stark vom allgemeinen Stil unterscheidet. Infolgedessen sind von sieben Ordnern nur noch vier übrig.

Wenn Sie ein kleines Projekt durchführen, haben Sie zwei Möglichkeiten:

• Wenn Sie lieber die Reste der Vorlage „7-1“ verwenden möchten, speichern Sie die abstracts , components , das layout und die base des Ordners.
• Wenn Sie mit einem großen Ordner main.scss , fallen alle Dateien mit main.scss zusammen mit der Datei main.scss in diesen Ordner. Es könnte ungefähr so ​​aussehen:

 sass/ _animations.scss _base.scss _buttons.scss _header.scss ... _variables.scss main.scss 

Was genau zu wählen ist, hängt von Ihrer Präferenz ab.

Wenn Sie sich von der Idee der Verwendung von SCSS inspirieren lassen, haben Sie möglicherweise eine Frage zur Verwendung solcher Stile, da Browser diese nicht unterstützen. Tatsächlich ist dies eine gute Frage, die uns zur letzten Phase unseres Gesprächs führt, zum Kompilieren von SCSS in CSS.

Kompilieren von SCSS zu CSS

Um den SCSS-Code in CSS zu konvertieren, benötigen Sie die Node.js- Plattform und den NPM- (oder Garn- ) Paketmanager.

Wir werden das node-sass , mit dem wir .scss Dateien in .scss Dateien kompilieren können. Dies ist ein Befehlszeilenprogramm, das einfach zu verwenden ist. Der node-sass sieht nämlich so aus:

 node-sass <input> <output> [options] 

Viele Optionen stehen hier zur Verfügung. Wir werden uns auf zwei konzentrieren:

• Mit der Option -w können Sie einen Ordner oder eine Datei überwachen. Das heißt, node-sass Änderungen im Code und kompiliert die Dateien automatisch in CSS, wenn sie auftreten. Diese Funktion ist während des Entwicklungsprozesses sehr nützlich.
• Die Option --output-style bestimmt den Stil der Ausgabe-CSS-Datei. Hier stehen verschiedene Optionen zur Verfügung: nested , expanded , compact , compressed . Wir werden diese Option verwenden, um eine fertige CSS-Datei zu erstellen.

Wenn Sie eine neugierige Person sind (ich hoffe, dass dies der Fall ist, da Neugier nur dem Entwickler zugute kommt), werden Sie höchstwahrscheinlich daran interessiert sein, die Dokumentation für das node-sass .

Also haben wir uns für die Tools entschieden, jetzt bleibt das Einfachste. Um SCSS in CSS zu konvertieren, müssen Sie die folgenden Schritte ausführen:

Erstellen Sie einen Projektordner und gehen Sie dorthin:

 mkdir my-app && cd my-app 

Initialisieren Sie das Projekt:

 npm init 

Fügen Sie das node-sass Paket zum Projekt hinzu:

 npm install node-sass --save-dev 

Erstellen Sie eine index.html Datei, main.scss , main.scss Datei:

 touch index.html mkdir -p sass/{abstracts,base,components,layout} css cd sass && touch main.scss 

Fügen Sie der Datei package.json Folgendes package.json :

 { ... "scripts": {   "watch": "node-sass sass/main.scss css/style.css -w",   "build": "node-sass sass/main.scss css/style.css --output-style compressed" }, ... } 

Fügen Sie den Link zur kompilierten CSS-Datei im head Tag der Datei index.html :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> <title>My app</title> </head> <body> <h1 class="heading">My app</h1> </body> </html> 

Das ist alles. Nachdem Sie an dem Projekt gearbeitet haben, führen Sie den npm run watch und öffnen Sie die Datei index.html in Ihrem Browser. Führen Sie den npm run build , um CSS zu minimieren.

Zusätzliche Dienstprogramme

▍ Interaktives Neuladen der Seite

Möglicherweise möchten Sie ein interaktives Neuladen von Seiten organisieren, um die Produktivität zu steigern. Dies ist bequemer als das manuelle Neuladen von index.html . So geht's:

Installieren Sie das live-server Paket (beachten Sie, dass es global installiert ist):

 npm install -g live-server 

Fügen Sie je nach Projekt das Paket npm-run-all , mit dem Sie mehrere Skripts gleichzeitig ausführen können:

 npm install npm-run-all --save-dev 

Fügen Sie package.json Folgendes package.json :

 { ... "scripts": {   "start": "npm-run-all --parallel liveserver watch",   "liveserver": "live-server",   "watch": "node-sass sass/main.scss css/style.css -w", }, ... } 

Nachdem Sie den Befehl npm run start ausgeführt haben, werden Sie während der Arbeit am Projekt sofort sehen, welche Änderungen daran vorgenommen wurden, ohne die Seite manuell neu zu laden.

▍ Autoprefixer-Paket

Zu diesem Zeitpunkt verfügen Sie über eine angepasste Entwicklungsumgebung, die sehr gut ist. Lassen Sie uns nun über Tools zum Erstellen eines Projekts und insbesondere über das Autoprefixer- Paket sprechen . Dies ist ein Tool (es handelt sich um ein Postcss-Plugin), das CSS-Code analysiert und CSS-Regeln mithilfe von Daten von Can I Use Präfixe von Browserherstellern hinzufügt.

Während der Erstellung der Site kann der Programmierer einige neue Funktionen verwenden, die nicht von allen Browsern vollständig unterstützt werden. Browserpräfixe zielen darauf ab, eine Reihe von Problemen zu lösen, einschließlich der Entwicklung browserübergreifender Webanwendungen.

Code mit Browserpräfixen sieht ungefähr so ​​aus:

 -webkit-animation-name: myAnimation; -moz-animation-name: myAnimation; -ms-animation-name: myAnimation; 

Es ist leicht zu bemerken, dass das Schreiben eines solchen Codes sehr mühsam ist. Um die Kompatibilität unseres CSS-Codes mit verschiedenen Browsern zu vereinfachen, ohne das Projekt erneut zu komplizieren, verwenden wir das autoprefixer Paket. Hier müssen Sie die folgenden Schritte ausführen:

• Wir kompilieren alle SCSS-Dateien zu einer CSS-Hauptdatei.
• Fügen Sie dieser Datei mit dem autoprefixer die autoprefixer .
• Komprimieren Sie diese CSS-Datei.

Dies ist im Allgemeinen die letzte Phase der Arbeit an dem Projekt. autoprefixer müssen Sie also tun, um autoprefixer zu verwenden:

Fügen Sie dem Projekt zwei Abhängigkeiten hinzu - postcss-cli und autoprefixer :

 npm install autoprefixer postcss-cli --save-dev 

Fügen Sie package.json den folgenden Code package.json und ändern Sie das build Skript:

 { ... "scripts": {   "start": "npm-run-all --parallel liveserver watch",   "liveserver": "live-server",   "watch": "node-sass sass/main.scss css/style.css -w",   "compile": "node-sass sass/main.scss css/style.css",   "prefix": "postcss css/style.css --use autoprefixer -o css/style.css",   "compress": "node-sass css/style.css css/style.css --output-style compressed",   "build": "npm-run-all compile prefix compress" ... } 

Jetzt müssen npm run buildSie nur noch den Befehl ausführen , und Sie erhalten eine komprimierte CSS-Datei, in der Browserpräfixe hinzugefügt werden. In diesem Repository finden Sie ein Vorlagenprojekt, das mit den hier beschriebenen Technologien erstellt wurde. Und hier ist ein weiteres Repository mit meinen Schulungsprojekten, bei deren Entwicklung ich die hier beschriebenen Techniken verwendet habe, und eine Seite mit Arbeitsbeispielen.

Es ist möglich, dass eine Analyse dieser Materialien Ihnen hilft, besser zu verstehen, worüber wir heute gesprochen haben.

Zusammenfassung

, CSS, , , CSS-, , .

Liebe Leser! -?