Ab den ersten Codezeilen beginnt jede Person zu verstehen, wie wichtig es ist, sie richtig zu organisieren und den gesamten Arbeitsbereich zu optimieren.
Es ist nicht wichtig, über welche Branche speziell gesprochen werden soll, aber es ist wichtig zu verstehen, dass überall dort, wo Code vorhanden ist, Regeln für dessen Erstellung und Speicherung vorhanden sein müssen.
Im ersten Paar scheint es natürlich so, als ob die Einhaltung bestimmter Regeln und Anweisungen nur Zeit braucht, was in der Praxis völlig anders aussieht. Die Quintessenz jeglicher Prinzipien beim Schreiben von Code ist, dass wir ihn nicht ein für allemal schreiben - wir kehren ständig zum Zweck der Bearbeitung und Änderung darauf zurück.
Dieser Prozess kann zu einem echten Problem werden, wenn dort Chaos und Unvorhersehbarkeit herrschen. Dieses Problem kann sich verschlimmern, wenn dieses Chaos nicht von Ihnen, sondern von einer Person verursacht wurde, mit der kein Kontakt hergestellt werden kann. Um solche Situationen zu beseitigen, gibt es Methoden.
Wenn wir über CSS sprechen, können wir mit Zuversicht sagen - jeder von uns verwendet eine bestimmte Methodik, bewusst oder nicht. Selbst wenn eine Person bestimmte Regeln und Standards nicht anwendet, hat sie immer noch ihre eigenen Gewohnheiten und wiederholt ständig Tricks.
Möglichkeiten zum Schreiben von Code müssen nicht allgemein akzeptiert und standardisiert sein, etwas anderes muss obligatorisch sein - sie müssen vorhersehbar sein.
Die Liste der Methoden, auf die Sie achten sollten, ist nicht so lang:
-BEM,
-Smacss,
-OOCSS,
-MCSS,
-Atomisches CSS
Atomic CSS ist vielleicht die ungewöhnlichste und sogar etwas beängstigendste Methode, die glücklicherweise nicht verhindert, dass es sehr verständlich und vorhersehbar ist.
Um meine Wahl zu untermauern, muss ich ein wenig zurückrollen.
Fast atomares CSS
Es gab Zeiten, in denen das Stammverzeichnis der überwältigenden Anzahl von Projekten zum Zeitpunkt der Erstellung der Benutzeroberfläche wie drei Dateien und zwei Ordner aussah:
>fonts >img -index.html -style.css -script.js
Aber diese Einfachheit mag täuschend praktisch erscheinen, tatsächlich geschah zumindest in zwei dieser drei Dateien etwas Schreckliches.
Zwei Dinge haben mich immer geärgert - Chaos und mangelnder Stil. In Css fallen viele verschiedene Nuancen unter die Klassifikation der Störung, aber vor allem war ich nicht zufrieden mit der ständigen Wiederholung der gleichen Regeln und Eigenschaften für verschiedene Selektoren.
Die erste Lösung für dieses Problem war die folgende:
- Erstellen einer Datei mit dem Namen "re-use.css",
- Erstellung von Anweisungen in dieser Datei, die theoretisch von mehr als einem Selektor benötigt werden können,
- Hinzufügen verschiedener Selektoren zu derselben Anweisung.
Es sah so aus:
... .class { display: inline-block;} .class { text-transform: uppercase;} ...
und akzeptierte anschließend Folgendes:
... .menu-link, .primary-button, .form-button, .footer-link, .social-link { display: inline-block;} ...
Natürlich war diese Lösung sehr unpraktisch und glücklicherweise nur vorübergehend. Nicht lange gequält mit dem endlosen Wechseln zwischen Dateien und dem Finden der richtigen Stelle in ihnen, kam ich zu dem Schluss, dass es viel bequemer wäre, separate Klassen zu erstellen, die jeweils für eine Anweisung verantwortlich sind:
...
.inline-block { display: inline-block;} .block {display: block;} .uppercase {text-transform: uppercase;}
In HTML-Dateien sahen Tags mit einer großen Anzahl von Klassen seltsam aus, aber diese Lösung schien mir durchaus akzeptabel:
<aside class=”sidebar fixed left top w-30 h-100 main-fill”></aside>
Auf einen Blick reicht es zu verstehen, dass es sich um eine Seitensäule mit fester Position auf der linken Seite des Bildschirms handelt, die 30% ihrer Breite und 100% ihrer Höhe einnimmt und mit der Hauptfarbe gefüllt ist.
Alles, was sich auf numerische Werte bezog, hauptsächlich externe und interne Einrückungen, schrieb ich im Standardformat. Zu diesem Zweck habe ich jedem Tag oder jeder Gruppe von Tags eine separate Klasse hinzugefügt. Im obigen Beispiel handelt es sich um die Klasse „Slider“.
Es war ein fast atomarer und fast bequemer Ansatz. Mehrere Mängel verhinderten, dass er sich wohl fühlte. Die wichtigsten davon waren die folgenden:
- Beim Erstellen einer großen Anzahl ähnlicher Tags, z. B. Listenelemente, musste ich viele Klassen kopieren, und es sah umständlich aus.
- Wenn ich Änderungen vornahm, musste ich Klassen für jedes Element separat löschen und hinzufügen.
- Es gab viele unbenutzte Klassen, die schwer zu fangen waren.
Und dann kamen zwei Dinge zur Rettung, die zur Lösung aller Probleme beigetragen haben - dies ist der Präprozessor und die Vorlagen-Engine.
Mit ihrer Hilfe habe ich meine Methodik geändert und das Layout angenehm und bequem gestaltet.
Fast perfekt CSS
Ich werde mit dem Präprozessor beginnen. Seine Wahl ist nicht grundlegend, ich habe zuerst Sass, dann SCSS verwendet und schließlich zu Stylus gewechselt, weil ich den Minimalismus respektiere und Stylus so minimalistisch wie möglich war (scss wird aufgrund seiner Beliebtheit in den folgenden Beispielen verwendet).
Das erste, was ich tat, war, zusätzliche Klassen zu schreiben, die wie echte Atome aussahen, indem ich die @ extend-Direktive verwendete:
.flex { display: flex; flex-wrap: no-wrap; } .flex-jc-center { @extend .flex; justify-content: center; } .flex-ai-center { @extend .flex; align-items: center; }
Ich mochte die Idee und die @ extend-Direktive verursachte eine Ähnlichkeit mit dem Atomkern, neben dem es zusätzliche Anweisungen gab.
Ich entschied, dass die Idee entwickelt und eine separate Datei für Organismen erstellt werden sollte. Organismen Ich habe Klassen genannt, die mehrere @ extend-Direktiven enthalten:
.header { @extend .fixed; @extend .w-100; @extend .main-fill; @extend .left; @extend .top; @extend .flex-ai-center; @extend .z-top; }
Nachdem ich aus verschiedenen Organismen einen kleinen „Zoo“ geschaffen hatte, beschloss ich, etwas mit Klassen zu tun, die numerische Werte für Einrückung und Größe erfordern.
Die Präprozessorfunktionen haben mir geholfen, dies wieder zu bewältigen, mit deren Hilfe ich einige Funktionen geschrieben und Variablen hinzugefügt habe.
Zuerst habe ich die Grafikprojekte, die ich von Designern bekomme, im Detail studiert und eine Reihe von Mustern aufgedeckt:
- Anzahl der Farben für jedes Projekt,
- Anzahl der Schriftarten
- Anzahl unterschiedlicher Größen für Text und Überschriften,
- wiederholtes Einrücken (für Abschnitte, Schaltflächen usw.)
Der erste Schritt bestand darin, Funktionen und Mixins zu schreiben, um die erforderlichen Klassen zu erstellen:
// px em @function em($pixels, $context: $browser-context) { @return #{$pixels/$context}em };
// $text-size: ( l: 18, m: 16, s: 14, xs: 12 );
@mixin emFonts($list, $n) { // $list – , n – . @each $status, $size in $list { // - &-#{$status} { font-size: em($size - $n); // } } }
Jetzt können wir diese Kombination von Mixins und Funktionen an jedem für uns geeigneten Ort aufrufen:
.txt { @include emFonts($text-size, 0) }
Und am Ausgang erhalten wir 4 Klassen für Text unterschiedlicher Größe:
.txt-m { font-size: 1.125em; } .txt-s { font-size: 1em; }
Ebenso werden Funktionen für Überschriftengrößen, Text- und Füllfarben, Schriftarten usw. erstellt und aufgerufen.
Das heißt, die Arbeit an jedem Projekt beginnt mit dem Ausfüllen der Werte für die Variablen, und die Klassen und Funktionen selbst migrieren von einem Projekt zum anderen.
Template Engine.
Ich denke, viele von Ihnen verwenden Vorlagen, und höchstwahrscheinlich ist dies Mops (früher Jade genannt).
Für den atomaren Satz ist es dank 3 Dingen notwendig:
Pug bewahrt uns vollständig vor umständlichen Mikroklassen von HTML-Code, da wir den folgenden Code drehen können:
… <ul class=”menu__list flex-ai-center w-100 relative “> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>first</li> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>second</li> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>third</li> </ul>
bequem zum Bearbeiten:
-let menuItemClasses = 'menu__item m-color m-font txt-s inline-block bold-border' // ul li(class=`${menuItemCLasses}`) frst li(class=`${menuItemCLasses}`) second li(class=`${menuItemCLasses}`) third ... </ul>
oder in einer anderen Ausführungsform unter Verwendung einer Schleife:
let menuItems = ['first', 'second', 'third'] ul -for(let item of menuItems) { li(class=”menu__item m-color m-font txt-s inline-block bold-border”) -}
Dies ist nicht weniger praktisch, da die Zeile mit den erforderlichen Klassen nicht mehr als einmal wiederholt wird.
Die letzte Schwachstelle dieser Methode bestand darin, dass eine große Anzahl nicht verwendeter Klassen im Code verblieb. Dieses scheinbar schwerwiegende Problem konnte jedoch leicht gelöst werden, indem dem Project Builder Plugins hinzugefügt wurden, mit denen unnötige Klassen entfernt wurden.
Fazit
Abschließend möchte ich Folgendes sagen:
Bevor ich anfing, die „fast atomare Methodik“ anzuwenden, habe ich lange Zeit smacss und dann BEM verwendet. Infolgedessen habe ich von bem nur die Namen für Klassen hinterlassen, die Beschreibungen von Einzügen und Größen sowie die Hierarchie der Speicherung von Dateien und Ordnern erfordern. Eine Reihe von vorgefertigten Klassen und Funktionen, die ich als Bibliothek mit dem Projekt verbinde.
Ein wichtiger Punkt, den ich erwähnen möchte, ist die Bequemlichkeit des Layouts der Seiten und ihrer einzelnen Abschnitte als Ganzes. Dank Mikroklassen ist es einfach genug, ein „Skelett“ einer Seite oder eines Abschnitts in der Vorlagen-Engine zu erstellen und erst dann Stile dafür zu schreiben.