Was ist die frage
Hallo allerseits, ich möchte heute meine persönlichen Erfahrungen mit Schreibstilen mit Ihnen teilen oder meine Vision ganz einfach auf das Problem des Schreibens von CSS für Websites konzentrieren.
Es scheint, dass im Zeitalter der technologischen Entwicklung, wenn wir jeden Tag mit neuen und neuen Frameworks, Präprozessoren, Template-Engines und anderen Dingen konfrontiert werden, überhaupt keine Probleme auftreten sollten. Intelligente Entwickler haben eine Reihe cooler "Funktionen" entwickelt, mit denen Sie leistungsstarke und erweiterbare Websites erstellen können. Aber wie setzt man diese Tools in CSS richtig ein? Und was sind die Schwierigkeiten?
Ich werde versuchen, diese und andere Fragen zu beantworten, indem ich meine Methoden und Ansätze zur Lösung einiger Probleme vorschlage.
Harte Realität
Es ist für niemanden ein Geheimnis, dass Anfänger und erfahrene Frontend-Entwickler häufig fertige Projekte erhalten, in denen Sie Änderungen vornehmen, das Design wiederholen und so weiter müssen. In meiner Praxis gab es viele solcher Aufgaben, wenn Sie mit dem Code einer anderen Person arbeiten, die Sie vertiefen und verstehen müssen. Und wenn Ihnen eine fertige Site in die Hände gefallen ist, öffnen Sie ein Stylesheet und sehen Sie sich
mehrere tausend Codezeilen an .
Als erfahrener Entwickler können Sie es natürlich in einer Art IDE wie Visual Studio Code öffnen und mit einer leichten Handbewegung durch die Such- und Ersetzungsfunktion jede Klasse leicht finden und neu schreiben.
Aber wie viel Zeit werden Sie dafür
aufwenden, wenn Sie eine angemessene Menge an Bearbeitungen vornehmen müssen, indem Sie einen Teil des neuen Designs für einige Abschnitte dort integrieren?
Ich denke
viel . Und alles, was Sie tun, wird leicht "nutzlos" sein. Stellen Sie sich eine Situation vor, in der die neu gestaltete Site auf einen anderen Entwickler übertragen wird oder Sie nach einiger Zeit aufgefordert werden, dort
neue Änderungen vorzunehmen .
SASS wird unsere Probleme lösen
Nachdem ein typischer Webentwickler all diese Informationen verarbeitet hat, gibt er an, dass er nicht in der Lage ist: Verwenden Sie CSS-Präprozessoren. Dort und Modularität und Komfort und alles.
Natürlich! Aber jedes Werkzeug in den Händen eines unerfahrenen Programmierers verliert jede Bedeutung. Manchmal öffnen Sie die Stile der Site und sehen, den begehrten Ordner mit dem Namen "sass". Wenn Sie ein Wunder erwarten, werden Sie am häufigsten nur enttäuscht.
Aufteilung der Stile in separate Dateien: header.sass, main.sass, animation.sass usw. Wie "genial" es ist. Und nicht effektiv. Wenn Sie die nächste solche Datei öffnen, stoßen Sie auf die gleichen Stillinien.
Was sind die Alternativen?
Es ist besser, zu schweigen, wie Entwickler ihre Klassen manchmal aufrufen, und über die Verkettung von Stilen. Ich denke, jeder, der sich in diesem Bereich umgedreht hat, hat etwas über BEM gehört und weiß, wie wichtig es ist, Klassen richtig zu benennen. Von hier aus lohnt
es sich, alle Probleme zu lösen.Ich biete Ihnen einen speziellen Ansatz, eine spezielle Methodik für die Entwicklung Ihrer Stile, jedoch nicht ohne die Hilfe von Präprozessoren. Die Implementierung dieser Methodik umfasst mehrere Phasen:
- Das erste ist , wie Sie bereits verstanden haben, die richtige Benennung Ihrer Klassen.
- Die zweite ist, Verschachtelungsstile loszuwerden. Hier hilft uns die BEM-Methodik. Nachdem Sie sich mit den Grundlagen dieser wunderbaren Dokumentation vertraut gemacht haben, können Sie mit dem nächsten fortfahren.
- SASS - in keiner Weise ohne dieses Tool. Er ist es, der die Modularität und Leistungsfähigkeit Ihres Projekts garantiert.
- Aufbau des Projekts. Ich denke, Sie haben viel über moderne Monteure gehört (es gibt viele Informationen zum Erstellen eines Projekts im Internet). Gulp wird uns hier helfen .
Nun bist du bereit.
Jetzt im Wesentlichen
In der modernen Interpretation des Frontends finden Sie einige Javascript-Frameworks. Die meisten von ihnen teilen die Site in kleinere Teile, Komponenten. Ich schlage vor, dass Sie dasselbe tun, wenn Sie darüber nachdenken, wie Sie Stile schreiben. Jede Schaltfläche, jeder Menüpunkt, jeder schöne Link, jedes Bild und sogar jeder einfache Text können eine Komponente sein.
Beispielsweise können wir bei dieser Art der Eingabe der Site verschiedene Komponenten unterscheiden:
- Anmeldeformular selbst
- Eingabefelder
- Schaltfläche "Senden"
- Kontrollkästchen
Und wie die Praxis zeigt, gibt es neben der Schaltfläche zum Senden auf der Website noch viele weitere Schaltflächen. Es wäre logisch, alle Stile für diese Schaltflächen an einem Ort zu speichern. Das Gleiche gilt für die Eingabefelder. Sie können sich an verschiedenen Stellen der Site befinden und ihr Erscheinungsbild wiederholen.
Auf dieser Grundlage wird es logisch sein, für jede Komponente einen eigenen Ordner zu erstellen und die Stile nur für diese zu behalten, was die Implementierung eines modularen Ansatzes ermöglicht. Das ist aber noch nicht alles.
Komponenteneinbauten
Wie ich bereits sagte, kann es auf einer Website viele Schaltflächen mit unterschiedlichen Farben und unterschiedlichen Einzügen geben. All dies sind Daten, und es ist sehr klug, diese Daten von Stilen zu trennen. Was ich vorhabe zu tun.
Ich schlage vor, jede Komponente in Form von drei Einheiten darzustellen: vars, maker und creater. In einfachen Worten handelt es sich um Daten, einen Aktionsersteller (Methoden zum Verwalten dieser Daten) und einen Stilersteller. Nun, das Wichtigste zuerst.
- Daten oder Variablen. Dazu gehören: Textfarbe der Schaltfläche, Hintergrundfarbe der Schaltfläche, Auffüllen, Rahmenradius, Schriftgröße usw. Alle diese Daten werden in Form von Variablen oder einem assoziativen Array in eine separate Datei geschrieben.
- Aktionsersteller oder -hersteller. Es enthält verschiedene Funktionen oder Mixins, die Daten als Argumente verwenden und daraus Stile generieren.
- Style Maker oder Creater. Eigentlich importieren wir hier Daten und Methoden für uns und binden sie nach Bedarf aneinander.
Das folgende Diagramm zeigt die Interaktion aller drei Entitäten.
Ist es schwer, dir das alles in den Kopf zu stecken? Betrachten Sie das Beispiel zum Erstellen der Grundkomponente einer Schaltfläche - „Schaltfläche“. Wir werden SCSS als Präprozessor verwenden.
Wie Sie bereits verstanden haben, erstellen wir im neuen Schaltflächenordner drei Dateien: _vars.scss, _creater.scss, _maker.scss.
_vars.scss$button_size:( sm:5px 20px, md:15px 20px ); $button_color:( white:#ffffff ); $button_back:( blue: #00e5e5 ); $button_config:( padding:$button_size, color:$button_color, background:$button_back );
Wie wir sehen, werden die Daten in Form eines assoziativen Arrays dargestellt. Alle individuellen Stile sind im Haupt-Set button_config enthalten. Um neue Stile zu erstellen, muss der Entwickler lediglich ein neues Array erstellen, es mit den erforderlichen Werten füllen und mit button_config verbinden.
_creater.scss: @import "vars"; @import "maker"; .button{ @include InitialComponent($button_config); }
Hier importieren wir Daten und Aktionsersteller. Anschließend initialisieren wir über das in maker registrierte InitialComponent-Mixin alle Stile, indem wir die Variable button_config übergeben. Und hier ist die Magie. Alle erforderlichen Klassen werden gemäß der BM-Benennung erstellt.
Das Ergebnis der Ausführung sind die Stile:
.button_padding_sm { padding: 5px 20px; } .button_padding_md { padding: 15px 20px; } .button_color_white { color: #ffffff; } .button_background_blue { background: #00e5e5; }
Und was ist der Erfolg hier?
Der Vorteil dieses Ansatzes ist nicht sofort zu spüren. Wenn das Projekt wächst, verstehen Sie den Nutzen einer solchen Methodik. Wenn Sie die Farbe mehrerer Schaltflächen auf verschiedenen Seiten ändern müssen, müssen Sie nicht in einer Reihe von Stilen nach Klassen suchen. Sie müssen lediglich den Schaltflächenordner und entsprechend die Datendatei öffnen und dort den gewünschten Stil ersetzen.
Und wenn Sie eine neue Schaltfläche erstellen müssen?
Dann ist es noch einfacher, wir schreiben die notwendigen Stile in ein bereits vorbereitetes Array oder erstellen ein neues und verbinden es dort in der Konfiguration und die Klassen werden erstellt.
All dies ist sehr praktisch, insbesondere wenn Sie Ihre Komponenten von Projekt zu Projekt übertragen und die Geschwindigkeit der Schreibstile um ein Vielfaches zunimmt, was nur ein Gefühl des Komforts und der Zufriedenheit hinterlässt, dass das Projekt in vollem Gange ist.
Dieser Ansatz wurde in vielen Projekten erfolgreich getestet und die Implementierung dieser Methodik wird in Kürze mit einer Dokumentation in russischer und englischer Sprache frei verfügbar sein.