Da ich die BEM-Methode bevorzuge, als ich anfing, mit opencart zu arbeiten, stieß ich sofort auf schreckliche Dinge für mich, dies sind verschachtelte Selektoren. Sie sind überall! Ausgehend von der Standardvorlage, endend mit fast allen Modulen und Copyright-Vorlagen. Warum so? Ich denke, es gibt eine Reihe von Gründen:
- Opencart basiert standardmäßig auf verschachtelten Selektoren, sowohl einer Vorlage als auch einem Admin-Bereich.
- Die meisten Entwickler, die mit opencart arbeiten, sind Back-End-Entwickler. Sie haben diesen Ansatz gerade aufgegriffen
- Es gibt eine Reihe notwendiger Klassen und eine ID, an die sowohl die Standard-OpenCart-Funktionalität als auch die Module des Autors gebunden sind, und dieselben Back-End-Entwickler und ihre Follower möchten aus verschiedenen Gründen einfach nichts ändern und mit dem Ablauf mitgehen.
Ich möchte den Back-End-Entwicklern keineswegs etwas Schlechtes sagen, aber viele von ihnen sind im Front-End und sogar im Layout sehr schwach. Diese Meinung wurde auf der Grundlage der Kommunikation mit ihnen, der Zusammenarbeit und im Allgemeinen ihrer Tätigkeit in thematischen Opencart-Foren gebildet. Ich betone, dass ich die Nische der Opencart-Entwickler meine.
Ich erstelle Vorlagen von Grund auf nach der BEM-Methode (so weit wie möglich im Rahmen von opencart) und kann mit Sicherheit sagen, dass jedes Modul unabhängig vom Markup mit einem halben Kick beginnt. Das Modul, auf das weiter unten eingegangen wird, benötigt keinerlei Korrekturen. Es muss lediglich die Arbeit damit vereinfacht und die Möglichkeit einer Wiederverwendung in anderen Projekten erkannt werden. Ich habe dieses Modul als Beispiel genommen, da es sehr einfach ist und nicht durch eine Menge zusätzlichen Codes abgelenkt werden muss, aber gleichzeitig alle Probleme enthält, die BEM löst. Dies ist ein real existierendes Modul und es gibt viele solcher Module und es gibt nur Vorlagen. Ich glaube, dass ein Kampfbeispiel besser ist als Hunderte von abstrakten.
Zunächst werde ich das
Wesentliche des Problems beschreiben . In einer der inländischen Opencart-Baugruppen ist ein Aufklebermodul integriert. Der ausgewählte Aufkleber wird im angegebenen Winkel angezeigt:
Oben links / oben rechts / unten links / unten rechtsEs gibt keine Optionen für Aufkleber, aber es gibt maximal 4 Positionen:
Schauen wir uns nun das Markup und die Stile an:
Was sehen wir:
- Alle Aufkleber sind in den Bildblock eingebettet.
- Trotz der Tatsache, dass der Bildblock logisch so gestaltet ist, dass er das Bild des Produkts speichert, sind alle Aufkleberstile daran gebunden. Betrachten Sie nun das gesamte CSS und insbesondere die Verschachtelung in den letzten Zeilen:
.image { position: relative; } .image .corner_0, .image .corner_1, .image .corner_2, .image .corner_3 { height: 57px; width: 58px; position: absolute; z-index: 998; } .image .corner_0 { left: 0px; top: 0px; } .image .corner_1 { right: 0px; top: 0px; } .image .corner_2 { left: 0px; bottom: 0px; } .image .corner_3 { right: 0px; bottom: 0px; } .box-product .image .corner_0 img, .box-product .image .corner_1 img, .box-product .image .corner_2 img, .box-product .image .corner_3 img { border: none; padding: 0px; } .box .box-product .image .corner_0 img, .box .box-product .image .corner_1 img, .box .box-product .image .corner_2 img, .box .box-product .image .corner_3 img { width: 60%; }
Wenn
.image .corner_2 noch weniger akzeptabel
aussah, sieht .box .box-product .image .corner_2 img bereits nicht so optimistisch aus ... Im Allgemeinen können wir davon ausgehen, dass wir irgendwo
.box-product ohne übergeordnetes
.box und haben werden Einige Stile werden verwendet, aber irgendwo mit den Eltern, aber hier stehen wir vor einer Reihe von Problemen:
- Wenn die Aufkleber außerhalb des Bilds verschoben werden , fallen alle Stile ab. Wenn wir das Bild mitnehmen und an einer anderen Stelle platzieren, wenden Sie die Bildstile dort an , wo sie nicht benötigt werden.
- Wenn Sie plötzlich ein Bild umbenennen, das logischerweise kein Repository für Aufkleber oder .box oder .box-Produkt ist, die noch höher sind und sicherlich nicht sagen, dass die Aufkleber daran angebracht sind, erhalten wir in keinem dieser Fälle das erwartete Ergebnis .
- Was ist, wenn wir .image mit .box-product gleichsetzen wollen? Wieder wird etwas schief gehen ...
- Es gibt viele sich wiederholende Selektoren, in denen sich nur .corner_ # ändert. Wenn wir diese Verschachtelung plötzlich ändern oder den Code in eine andere Vorlage übertragen möchten, müssen wir ihn überall ändern, und es kann immer noch zu Medienabfragen kommen. Dies ist nur Zeitverschwendung.
- Erhöhte Spezifität. Dieses Problem macht sich immer nach einer Weile bemerkbar und ruht oft auf den Schultern derer, die es nicht geschaffen haben ...
Diejenigen, die mit der BEM-Methodik vertraut sind, sind sich dessen seit langem bewusst, und diejenigen, die nicht vertraut sind, sind meiner Meinung nach mehr als einmal begegnet. Versuchen wir, diese Probleme zu lösen.
Da eine der Hauptaufgaben die Möglichkeit ist, den Code wiederzuverwenden, können wir unsere Aufkleberecke nicht wie zuvor benennen, da wir sie in einem anderen Projekt möglicherweise nicht in den Ecken, sondern in der Mitte jeder Seite oder sogar in einer Reihe haben möchten Es wäre logisch, es einfach als Aufkleber zu bezeichnen. Um jedoch nicht von externen Blöcken abhängig zu sein, legen Sie unsere Sticks in den
Aufkleberbehälter , der entweder ein unabhängiger Block oder eine Mischung für jeden Block auf der Produktkarte sein kann. Ergebnis:
Äußerlich haben wir das gleiche Ergebnis erzielt, aber das Markup und die Stile sind jetzt unterschiedlich:
.stickers { position: relative; } .sticker { } .sticker_position_0 { position: absolute; left: 0px; top: 0px; } .sticker_position_1 { position: absolute; right: 0px; top: 0px; } .sticker_position_2 { position: absolute; left: 0px; bottom: 0px; } .sticker_position_3 { position: absolute; right: 0px; bottom: 0px; } .sticker__img { border: none; padding: 0; }
Wie ich bereits sagte, kann der
.stickers- Behälter entweder eine eigenständige Einheit oder eine Mischung für jede Einheit auf der Produktkarte sein. In diesem Fall haben wir es mit dem
.image- Block gemischt, indem wir ihre Zuordnungen geteilt haben.
Jeder Aufkleber hat einen Klassenaufkleber, der Stile enthält, die allen Sticks gemeinsam sind, z. B. Größe. Aber wir entfernen die Stile, die für die Positionierung im
Modifikator verantwortlich sind, mit der Positionstaste :
Hinweis:.sticker kann als Element sein
.stickers :
<div class="stickers"> <div class="stickers__sticker sticker sticker_position_2"> <img class="sticker__img " src="#"> </div> </div>
sowie einen unabhängigen Block für die Punktplatzierung ohne Kontextaufkleber.
Jetzt können Sie mit einem Handgriff überall Aufkleber anbringen. Sie können beispielsweise die Sticks aus dem Bild entfernen und auf die gesamte Produktkarte im Produktbehälter anwenden:
Der Hauptpunkt ist, dass weitere Manipulationen viel einfacher sind und dieser Code, der nur in ein anderes Projekt kopiert wird, sofort funktioniert. Er muss nur noch mit den erforderlichen Eigenschaften geändert werden.
Es gibt immer noch ein ungelöstes Problem mit diesen Selektoren, die früher die Augen geschwächt haben:
.box-product .image .corner_3 img {....} .box .box-product .image .corner_2 img {....}
Im Allgemeinen habe ich kein Box-Produkt gefunden, um den Kontext des Problems zu erkennen, daher kann ich nicht mit Sicherheit sagen, ob ein solcher Selektor benötigt wird oder nicht, aber die BEM-Methode verbietet das Verschachteln nicht, wenn Sie nicht darauf verzichten können. Mit dem resultierenden Markup können Sie den Selektor zumindest auf 2 Klassen reduzieren, was eine genauere Interaktion mit Elementen ermöglicht. Ohne die Spezifität zu erhöhen, können Sie Stile entweder neu definieren oder hinzufügen, indem Sie sie einfach in der richtigen Reihenfolge anordnen:
.box-product .sticker__img {...} .box .sticker__img {...}
Fazit
Dies ist ein sehr kleiner Code, der sehr viel Sinn macht.
Es reicht aus, einen Block aufzuräumen, um die Arbeit zu erleichtern. Es ist möglich, selbst bei einem vollständig gestarteten Projekt einen stabileren Betrieb in Teilen zu erzielen, und noch mehr, sodass Sie ein Modul einmal umschreiben und das Leben für alle einfacher machen können.
Vielen Dank an alle, die bis zum Ende gelesen haben und ich hoffe, dass mein Artikel nützlich war.