Wir schreiben CSS besser und schöner

Um ehrlich zu sein: Gutes CSS zu schreiben ist schwierig.
Viele Entwickler schreiben kein CSS. Alles, aber nicht das! Nicht CSS.

Wenn Sie sich bei der Entwicklung von Anwendungen mit CSS befassen mussten, war dies nicht der erfreulichste Teil Ihrer Arbeit. Aber es kann nicht vermieden werden, oder? Heute ist es so wichtig, den Benutzer mit dem Design der Anwendung zufrieden zu stellen, dass ohne CSS - nichts.

Wenn das Projekt gerade erst beginnt, läuft alles gut. Sie haben nur ein paar Selektoren: .title , input , #app - so einfach wie das #app .

Aber allmählich wächst die Anwendung und es ist beängstigend, sich mit CSS zu befassen: Es ist nicht so einfach, all diese Selektoren herauszufinden. Sie fangen an, so etwas wie div#app .list li.item a zu schreiben, einige Codeteile werden immer wieder wiederholt und alle Ihre Schriften am Ende der Datei abgelegt: Es ist Ihnen egal, weil CSS scheiße ist. Das Ergebnis sind 500 Zeilen CSS-Code, die nicht unterstützt werden können.


Ich bin es, wenn ich gegen CSS kämpfe

Übersetzt nach Alconost

Meine heutige Herausforderung besteht darin, Ihnen beizubringen, wie Sie CSS besser schreiben können. Ich möchte, dass Sie sich alte Projekte ansehen und denken: „Oh Götter! Wie kannst du das schreiben? "

Aber was ist mit CSS-Frameworks? - Du fragst. Schließlich wurden sie dafür erfunden - um guten CSS-Code zu schreiben.

Richtig. Aber sie haben Nachteile:

• Das Ausgabedesign ist oft langweilig.
  
• Es kann schwierig sein, die erforderlichen Einstellungen vorzunehmen oder über die Funktionen des Frameworks hinauszugehen.
  
• Um Frameworks zu verwenden, müssen Sie diese zuerst studieren.
  

Nun, Sie lesen diesen Artikel - das heißt, es gibt einen Grund, oder? Lernen Sie also ohne weiteres, CSS besser zu schreiben.

Hinweis In diesem Artikel geht es nicht darum, wie Sie schöne Anwendungen erstellen, sondern wie Sie unterstützten CSS-Code schreiben und wie Sie ihn organisieren.

SCSS

In den Beispielen werde ich SCSS verwenden .

SCSS ist ein CSS-Präprozessor, im Wesentlichen eine Obermenge von CSS, die einige coole Funktionen wie Variablen, Verschachtelung, Importe und Verunreinigungen („Mixins“) hinzufügt.

Als nächstes werde ich Ihnen sagen, welche Möglichkeiten wir hier nutzen werden.

Variablen

SCSS hat Variablen und ihr Hauptvorteil ist die Wiederverwendung. Angenommen, Sie haben eine Farbpalette für eine Anwendung und die Primärfarbe ist blau.

Daher haben Sie überall Blau: den Hintergrund der Schaltflächen für die background-color , die color Überschriften, Links. BLAU - ÜBERALL.

Und plötzlich blau hat dir nicht gefallen. Der neue Favorit ist grün.

• Wenn Sie keine Variablen verwendet haben, müssen Sie alle Zeilen ändern, in denen Blau angezeigt wird.
  
• Und mit Variablen ändern Sie einfach den Wert einer von ihnen.
  

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

Nisten

In SCSS können Sie die Verschachtelung verwenden. Daher aus dem Fragment

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

Sie können einen Code wie folgt erstellen:

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

Letzteres liest sich besser, oder? Durch das Verschachteln können Sie weniger Zeit mit dem Schreiben komplexer Selektoren verbringen.

Importieren und Teildateien

Wenn Sie Wartbarkeit und Lesbarkeit gewährleisten müssen, ist es eine schlechte Idee, den gesamten Code in einer großen Datei zu speichern. Wenn Sie experimentieren oder eine kleine Anwendung schreiben, ist dies immer noch erträglich, aber auf professioneller Ebene ... versuchen Sie es nicht einmal. Zum Glück löst SCSS dieses Problem.

Wir können "Teildateien" erstellen - für die der Name mit einem Unterstrich beginnt: _animations.scss, _base.scss, _variables.scss und so weiter.

Zum Importieren wird die entsprechende Direktive verwendet: @import . Zum Beispiel können Sie dies tun:

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

Sie haben vielleicht gedacht: „Aha! Er hat hier einen Fehler! Wir müssen _animations.scss schreiben, keine animations . “

Nein. SCSS ist intelligent genug, um zu erkennen, dass es sich um eine Teildatei handelt.

Das ist alles, was wir über Variablen, Verschachtelung, Teildateien und Import wissen müssen . SCSS hat andere Möglichkeiten - Verunreinigungen, Vererbung und verschiedene Anweisungen ( @for , @if , ...), aber ich werde sie hier nicht @if .

Wenn Sie interessiert sind, lesen Sie die Dokumentation : Sie ist klar genug und gut geschrieben.

CSS-Bestellung: BEM-Methodik

Ich habe unzählige Male gebräuchliche Namen für CSS-Klassen verwendet. Nun, Sie wissen: .button .page-1 .page-2 .custom-input .

Oft haben wir keine Ahnung, welchen Namen wir wählen sollen - obwohl die Benennung eine wichtige Aufgabe ist. Stellen Sie sich vor, Sie haben mit dem Schreiben einer Bewerbung begonnen und dann beschlossen, dieses Geschäft um einige Monate zu verschieben - oder, noch schlimmer, jemand hat Ihr Projekt übernommen. Wenn Sie nicht über die Benennung im CSS-Code nachdenken, ist es schwierig, sofort zu verstehen, was in einer bestimmten Zeile gemeint ist.

BEM hilft bei der Lösung dieses Problems. BEM ist eine Namenskonvention; steht für Block, Element, Modifikator.

Diese Methode hilft Ihnen, Ihren Code zu strukturieren, modularer zu gestalten und die Wiederverwendung zu vereinfachen. Mal sehen, was "Block", "Element" und "Modifikator" bedeuten.

Blöcke

Ein Block kann als Komponente vorgestellt werden. Nehmen Sie zum Beispiel den Lego-Konstruktor.

Wie macht man aus einem Designer ein einfaches Haus? Es braucht ein Fenster, ein Dach, eine Tür, ein paar Wände - und das war's. Dies sind genau unsere Blöcke - sie haben ihre eigene Bedeutung.

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

Gegenstände

Und wie macht man aus Designerwürfeln ein Fenster? Sie können die Würfel finden, die wie Teile des Rahmens aussehen, und daraus ein schönes Fenster zusammensetzen. Dies werden unsere Elemente sein . Sie stellen die notwendigen Teile des Blocks dar, sind aber außerhalb des Blocks selbst nutzlos.

Benennung : .block__element + __ + Elementname: .block__element
Beispiele: .post__author, .post__date, .post__text

Modifikatoren

Also haben wir eine Art Fenster gemacht. Jetzt brauchten wir ein grünes oder zum Beispiel ein kleines Fenster. Dies werden unsere Modifikatoren sein. Sie sind Flags auf Blöcken und Elementen, mit denen Verhalten, Erscheinungsbild usw. geändert werden.

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

Anmerkungen

• BEM bedeutet, Klassen und nur Klassen zu benennen. Keine Bezeichner und keine Tags - nur Klassen .
  
• Blöcke und Elemente können in anderen Blöcken und Elementen verschachtelt sein, müssen jedoch vollständig unabhängig sein. Notwendigerweise unabhängig . Daher ist es nicht erforderlich, der Schaltfläche ein Feld hinzuzufügen, damit es sich unter der Überschrift befindet. Andernfalls wird es an die Überschrift angehängt. Verwenden Sie besser Hilfsklassen.
  
• Ja, die HTML-Datei wird überladen, aber es ist nicht beängstigend: Die Vorteile von BEM überwiegen diesen Nachteil.
  

Beispiel

Eine kleine Übung für die Leser. Gehen Sie zu den Websites, die Sie häufig besuchen, und überlegen Sie, welche Blöcke, Elemente und Modifikatoren möglicherweise vorhanden sind.

Zum Beispiel kann ich mir ein solches Bild im Google Store vorstellen:



Jetzt bist du dran. Seien Sie neugierig und überlegen Sie, was besser gemacht werden könnte. Und um Ihre eigenen Fähigkeiten zu verbessern, müssen Sie natürlich unabhängig voneinander Code suchen, experimentieren und schreiben.

Organisieren von CSS-Dateien: Das 7-1-Prinzip

Ich habe dich noch nicht müde? Großartig! Lassen Sie uns herausfinden, wie CSS-Dateien organisiert werden. Dies verbessert die Effizienz der Arbeit erheblich und hilft Ihnen, den zu reparierenden CSS-Code sofort zu finden.

Es ist Zeit, sich mit dem Prinzip "7-1" vertraut zu machen.
Diese Zahlen sagen dir nichts, oder?

Aber alles ist ganz einfach. Es gibt zwei Regeln zu befolgen:

1. Legen Sie Teildateien in 7 Ordnern ab.
   
2. Importieren Sie sie alle in eine main.scss Datei im Stammverzeichnis. Das ist alles.
   

Sieben Ordner:

• Der Basisordner ist der CSS-Vorlagencode, den Sie schreiben, wenn Sie ein neues Projekt starten. Dies können Layoutregeln, Animationen, Hilfsklassen (z. B. margin-right-large , text-center , ...) usw. sein.
  
• Der components - alle Komponenten, die zum Erstellen von Seiten verwendet werden: Schaltflächen, Formulare, Paging-Module - „Swiper“, Popup-Fenster usw.
  
• layout - für das Layout verschiedener Teile der Seite, dh Kopf- und Fußzeile, Navigation, Abschnitte, benutzerdefiniertes Raster usw.
  
• Der Seitenordner ist für Seiten gedacht, die einen separaten Stil benötigen, der vom Standard abweicht.
  
• Der themes - für verschiedene Anwendungsthemen (Dunkelmodus, Verwaltung usw.).
  
• abstracts Ordner - alle Funktionen, Variablen und Verunreinigungen. Kurz gesagt, Hilfssachen.
  
• Der vendors ist eine externe Bibliothek, ohne die möglicherweise keine einzige Anwendung auskommt. Der vendors enthält Dateien, die von Ihnen unabhängig sind: Font Awesome, Bootstrap-Dateien und all das.
  

Hauptdatei

Alle Teildateien werden hier importiert.

 @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; … 

Ja, es sieht ein wenig aufgebläht aus, gebe ich zu. Diese Architektur wurde jedoch für große Projekte erfunden - und für kleinere Aufgaben gibt es eine andere Option.

Erstens benötigen wir den vendors : Der gesamte externe CSS-Code befindet sich im link Tag in der Kopfzeile. Außerdem wird der themes nicht benötigt: Höchstwahrscheinlich hat eine kleine Anwendung nur ein Thema. Schließlich gibt es keine Stile für bestimmte Seiten - daher entfernen wir den entsprechenden Ordner. Es sind also noch vier Ordner übrig - großartig!

Jetzt haben wir zwei Möglichkeiten:

1. Wenn Sie dem Prinzip "7-1" folgen, müssen Sie die abstracts , components , das layout und die base der Ordner speichern.
   
2. Wenn Sie mit einem großen Ordner, in dem sich alle Teildateien und main.scss , main.scss , erhalten Sie main.scss :
   

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

Es liegt an dir.

Ich habe überzeugt! Wie wende ich das alles an? Ich meine, Browser unterstützen keine scss Dateien, oder?

Richtig bemerkt zu werden! Im letzten Schritt werden wir SCSS in CSS kompilieren.

Machen Sie CSS aus SCSS

Wir benötigen Node.js und NPM (oder Garn ).

Wir werden das node-sass , mit dem wir .scss Dateien in .scss kompilieren können.

Die Benutzeroberfläche ist recht einfach:

 node-sass <> <> [] 

Wir werden nur zwei Parameter verwenden:

• Die -w - überwacht das Verzeichnis oder die Datei. Das node-sass wartet auf Änderungen im Code und kompiliert sofort die entsprechende Datei in CSS, sobald es sie erkennt. node-sass ist während der Entwicklung sehr praktisch.
  
• Der Parameter --output-style - wie die Ausgabe-CSS-Datei aussehen wird. Es kann folgende Werte annehmen: nested|expanded|compact|compressed . Wir werden diese Option beim Erstellen der CSS-Datei verwenden.
  

Wenn Sie neugierig sind (ich hoffe es: der Entwickler sollte neugierig sein!), Die vollständige Dokumentation finden Sie hier .

Jetzt wissen wir, welche Werkzeuge verwendet werden. Der Rest ist noch einfacher zu erledigen:

• Projekt mkdir my-app && cd my-app : mkdir my-app && cd my-app
  
• Initialisieren Sie es: npm init
  
• Fügen Sie die node-sass : npm install node-sass --save-dev
  
• Erstellen Sie die erforderlichen Ordner, index.html und main.scss :
  

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

• Fügen Sie der Datei package.json die folgenden Skripte 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 zum Head-Tag der Datei index.html hinzu:
  

 <!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"> <b><link rel="stylesheet" href="css/style.css"></b> <title>My app</title> </head> <body> <h1 class="heading">My app</h1> </body> </html> 

Das ist alles! Wenn Sie den Code schreiben, führen Sie npm run watch und öffnen Sie die Datei index.html im Browser. Um CSS zu reduzieren, führen Sie einfach npm run build .

Noch etwas

Starten Sie sofort neu

Um besser argumentieren zu können, können Sie die lokale Datei index.html automatisch neu laden.

Um dies zu tun, tun Sie dies:

• Installieren Sie das live-server Paket: npm install -g live-server
  Hinweis: Dies ist ein globales Paket.
  
• Fügen Sie je nach Projekt npm install npm-run-all --save-dev : npm install npm-run-all --save-dev - Auf diese Weise können Sie mehrere Skripte gleichzeitig ausführen.
  
• Fügen Sie package.json die folgenden Skripte package.json :
  

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

Wenn Sie nun npm run start , werden die Änderungen sofort angezeigt - ohne unnötige Bewegungen von Ihrer Seite.

Automatische Präfixe

Wir haben Entwicklungswerkzeuge eingerichtet - großartig! Lassen Sie uns nun insbesondere über Build-Tools sprechen - darüber: Autoprefixer .
Dieses Tool (oder besser gesagt das Postcss-Plugin) analysiert CSS und fügt CSS-Regeln Herstellerpräfixe hinzu, indem Werte von Can I Use verwendet werden .

Beim Erstellen einer Website werden möglicherweise neue Funktionen verwendet, die nicht in allen Browsern unterstützt werden. Durch die Unterstützung solcher Funktionen können Herstellerpräfixe zugelassen werden.

Ein Beispiel, wie es aussehen wird:

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

Ja, es von Hand zu schreiben ist mühsam. Das Leben für uns einfacher zu machen ist ein Tool zum automatischen Hinzufügen von Präfixen, mit denen CSS-Code ohne zusätzlichen Aufwand mit Browsern kompatibel wird.

So kompilieren Sie CSS:

1. Wir kompilieren alle SCSS-Dateien zu einer CSS-Datei.
   
2. Fügen Sie Präfixe mit Autoprefixer hinzu.
   
3. Komprimieren Sie die CSS-Datei.
   

Es ist nichts mehr übrig - Kanal nicht wechseln.

• Fügen Sie zwei Abhängigkeiten hinzu - postcss-cli und autoprefixer : npm install autoprefixer postcss-cli --save-dev
  
• Wir ändern das build Skript und fügen diese Zeilen zu package.json :
  

 { … "scripts": {  "start": "npm-run-all --parallel liveserver watch",  "liveserver": "live-server",  "watch": "node-sass sass/main.scss css/style.css -w", <b>   "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"</b> … } 

Wenn Sie jetzt npm run build starten, werden Providerpräfixe hinzugefügt und der CSS-Code selbst wird komprimiert. Einfach nur Magie!

Willst du noch etwas Magie? Ich habe das Repository erhöht - damit Sie es schneller herausfinden können?

Wenn Sie daran interessiert sind, wie ich diese Fähigkeiten auf meine Portfolio-Seite angewendet habe, schauen Sie sich dieses Repository an und genießen Sie das Ergebnis . Ich hoffe, diese Beispiele helfen, besser zu verstehen, was in dem Artikel besprochen wurde.

Und ... das ist alles für heute! Jetzt können Sie wiederverwendbaren unterstützten modularen CSS-Code schreiben.



Über den Übersetzer

Der Artikel wurde von Alconost übersetzt.

Alconost lokalisiert Spiele , Anwendungen und Websites in 68 Sprachen. Muttersprachliche Übersetzer, Sprachtests, Cloud-Plattform mit API, kontinuierliche Lokalisierung, Projektmanager rund um die Uhr, jedes Format von Zeichenfolgenressourcen.

Wir machen auch Werbe- und Schulungsvideos - für Websites, die verkaufen, Image, Werbung, Schulung, Teaser, Expliner, Trailer für Google Play und den App Store.

Weitere Details