Wie schreibe ich keine Vorlagen für Bootstrap?

Nur wenige Leute entwerfen jetzt eine Website von Grund auf neu - warum, wenn es eine Reihe großartiger CSS-Frameworks gibt? Das beliebteste unter ihnen ist Bootstrap. Trotzdem möchte jeder, dass die Website einzigartig aussieht, nicht wie die anderen - deshalb halten sie sich oft (nach besten Kräften) an eine kostenlose oder kostenpflichtige Vorlage oder an ihr eigenes UI-Kit.

Ich möchte über einige Probleme sprechen, die (leider) auch in kostenpflichtigen Vorlagen auftreten, ganz zu schweigen von meinen Lösungen. Der folgende Text erhebt keinen Anspruch auf Einzigartigkeit und ist für erfahrene Entwickler wahrscheinlich nicht von Interesse. Er kann jedoch für Front-End-Entwickler, Layout-Designer und breit angelegte Webentwickler nützlich sein. Also, wenn Sie noch interessiert sind, herzlich willkommen!

Wir haben so historisch ...

Wenn eine Site über einen längeren Zeitraum entwickelt wurde, ändern sich in der Regel die Anforderungen an ihr Erscheinungsbild regelmäßig. Wenn Programmierer darüber hinaus regelmäßig Änderungen daran vornehmen, wird der Code (in unserem Fall CSS) zu einem Chaos. Irgendwo Bootstrap-Klassen, manchmal Vorlagenklassen, wird all dies mit Krücken mehrerer Generationen von Schriftsetzern verdünnt und mit Inline-Stilen gewürzt. Versuche, etwas zu ändern oder ein neues hinzuzufügen, führen zu langen magischen Spielen in „Ratet mal, welche Klassen ihr in diesen HTML-Block einfügen müsst!“. Ich möchte alles rauswerfen und von Grund auf neu schreiben. Tatsächlich habe ich hier nur versucht, dem Formular schnell neue Felder hinzuzufügen. Ich habe genug Aufgaben im Backend ... Eigentlich werden wir im ersten Beispiel den Grund berücksichtigen, der mich dazu veranlasst hat, diesen Artikel zu schreiben.

Eingabegröße

Wir haben also eine Standardansicht von Formularelementen, die wir ein wenig ändern möchten, zum Beispiel die Höhe reduzieren. Wie kann man das machen, damit die Eingaben dem UI-Wal entsprechen?

Sie können Inline-Stile einfügen! Es wird so viel Spaß machen - dann kopiere all dieses Fußtuch in jede Eingabe!

Jemand wird lachen, aber ich sehe regelmäßig solche Entscheidungen. Zum Glück nicht in diesem Fall, aber es tut. Was passiert, wenn wir das tun? Sie müssen lange Stilbeschreibungen in jede Eingabe kopieren, die Vorlage aufblasen und sie weniger lesbar machen.

Schreiben wir unsere eigene Klasse, in der wir die notwendigen Höheneinstellungen beschreiben und gleichzeitig die Schriftgröße ändern!

Ja Er ist es. "H40_px-16." Aus dem Namen der Klasse geht sofort hervor, was sie tut. Ich habe so etwas getroffen, als ich zu verstehen versuchte, warum die neuen Eingaben etwas dicker als nötig sind. Ich habe mir den Code in derselben Vorlage angesehen und ihn gefunden. Welche Konsequenzen erwarten uns in diesem Fall? Im Prinzip nichts kritisches. In jeder Klasse von Formularelementen wird zusätzlich zu "Formularsteuerung" "h40_px-16" hinzugefügt. Müssen Sie sich erinnern oder dokumentieren. Und wenn alle Elemente des Formulars mit grünem Hintergrund ausgeführt werden müssen? Fügen Sie einfach eine weitere Klasse hinzu, "b_g". Und dann noch eine ...

Bestehende Klassen für Formularelemente erweitern?

Es ist äußerst selten, diese Lösung zu sehen, obwohl es mir so scheint, als ob sie an der Oberfläche ist. Und meiner Meinung nach - das Richtigste. Dies ermöglicht es uns, die Anzahl der Klassen zu sparen, die im Element angegeben werden müssen, aber vor allem verringert es die Verwirrung unter Entwicklern, die versuchen, mit diesem Code zu arbeiten. Wenn die erforderliche Änderung alle Elemente dieses Typs betrifft, fügen wir einfach unsere eigenen Regeln für die "Formularsteuerung" hinzu, und alle Eingaben ändern ihre Höhe, Schriftart, Hintergrund usw.

Benutzerdefinierte Lösung

In Übereinstimmung mit dem UI-Kit müssen Sie der Site eine innovative Lösung hinzufügen, die noch nie zuvor gesehen wurde! Und es ist von Grund auf neu geschrieben. Wirklich? Nein, ich kann dies zulassen, wenn Sie pureCSS verwenden - ein gutes, aber minimalistisches Framework - und etwas implementieren müssen, das nicht darin enthalten ist. Wenn Sie jedoch Bootstrap verwenden, müssen Sie mit extrem hoher Wahrscheinlichkeit nur die Dokumentation erneut lesen.

Schauen wir uns eine extrem vernachlässigte Situation an, in der die Site eine eigene Implementierung von Abzeichen hat. Mit verbundenem Bootstrap. Daher musste einer der Entwickler, der nicht an der Erstellung dieser Abzeichen beteiligt war, diese irgendwo auf der Website hinzufügen.

1. Zuerst schaut er sich die Bootstrap-Dokumentation an und kopiert die Lösung von dort.
2. Da dies visuell nicht dem UI-Wal entspricht, sucht er nach Dokumentation zu der verwendeten innovativen Lösung.
3. Wenn diese Dokumentation nicht vorhanden ist (und höchstwahrscheinlich auch nicht), sucht er im Code nach Beispielen für die Implementierung.
4. Nachdem er die gewünschte Beijik-Klasse kopiert hat, sieht er, dass das Abzeichen jetzt korrekt ist, aber blau, und er braucht Rot.
5. Nachdem die CSS-Datei gefunden wurde, die die Klassen für die Benutzeroberfläche des Wals beschreibt, wird festgestellt, dass die rote Farbe nicht gelegt wurde, und durch Seufzen wird die Klasse "beijik-rot" hinzugefügt.

Vergleichen wir dies nun mit der Situation, in der die Ausweisklasse für ihre eigene Ausweisimplementierung neu definiert wurde und die Farbimplementierung in der Dokumentation beschrieben wurde:

1. Zuerst schaut er sich die Bootstrap-Dokumentation an und kopiert die Lösung von dort.
2. In der Dokumentation finden Sie Informationen zum Hinzufügen von Rot: Abzeichenrot

Hier haben wir ein Beispiel untersucht, in dem es notwendig ist, die vorgefertigte Lösung nicht nur zu ändern, sondern auch zu erweitern, da wir mit der sofort einsatzbereiten Funktionalität nicht zufrieden sind (Abzeichen in Bootstrap3 haben keine benutzerdefinierte Farbe). In diesem Fall bleibt die beste Lösung, die vorhandene Klasse zu überschreiben, und erst danach - fügen Sie Ihre eigene hinzu.

Natürlich sind die Beispiele, die ich gegeben habe, ziemlich verfeinert, aber ich bin wirklich auf eine Situation gestoßen, in der ich zuerst nach einer Lösung in der Dokumentation für Bootstrap gesucht habe, dann in der Dokumentation für die Vorlage, die auf der Site dafür verwendet wurde (zum Glück gab es Dokumentation dafür), und dann nach CSS-Dateien gesucht habe, in denen und wie das Standardverhalten neu definiert und wie das Analog implementiert wurde - aber am Ende habe ich meine eigenen Stile geschrieben, um die ursprünglich vorhandenen Möglichkeiten (!) zurückzugeben.

Wenn Sie Ihre Kollegen nicht verletzen und die Arbeit des gesamten Teams beschleunigen möchten, beachten Sie beim Erstellen Ihrer eigenen Stile für die Website die folgenden Regeln:

• Überprüfen Sie, wie die erforderliche Funktionalität im verwendeten Framework implementiert ist (Sie erinnern sich - höchstwahrscheinlich ist sie vorhanden).
• Finden Sie heraus, welche Klassen neu definiert werden müssen, um den gewünschten Look zu erzielen.
• Wenn die Funktionalität nicht oder nicht vollständig implementiert ist, koordinieren Sie mit Kollegen eine bequeme Möglichkeit, die Funktionalität zu erweitern, und versuchen Sie, sie für die Zukunft zu dokumentieren.
• Wenn die Funktionalität nicht überall benötigt wird, sondern nur auf einer bestimmten Seite - legen Sie sie in eine separate Datei und verbinden Sie sie \ sammeln Sie sie dafür (bitte keine Inline-Stile).

Nachwort

All dies ist meine persönliche Meinung. Ich bin kein professioneller Front-End-Entwickler und stoße normalerweise auf HTML und CSS, wenn ich neue Funktionen hinzufüge. Es ist für mich bequemer, sowohl die Vorder- als auch die Rückseite sofort zu konfigurieren und sie dann zum Kämmen des Designs zu verwenden. Wenn Ihr Team Prozesse eingerichtet, die Regeln für guten Code beschrieben, Richtlinien für alle Entwickler zusammengestellt und alles einer Codeüberprüfung unterzogen hat, können Sie über diesen Artikel nur lachen, das macht mir nichts aus. Wenn sich herausstellt, dass der Artikel für jemanden nützlich ist, dann war es nicht umsonst, dass ich meine verwirrten Gedanken darlegte.