Meiner Meinung nach ist die Identifizierung von CSS-Architekturmustern die wichtigste Fähigkeit, während die schwierigste, die zu erlernen ist, die Modularität von SMACSS. Letzteres erfordert viel Disziplin, um sorgfältig zu bewerten, welche CSS-Regeln wo stören werden, insbesondere bei den “Slots”. Wenn Sie kleinere Websites erstellen, ist die Art und Weise, wie Sie Ihre Stile organisieren, in der Regel kein großes Problem. Sie erstellen Ihre üblichen Dateien, schreiben alle benötigten CSS, und das ist alles. Wenn es jedoch um größere, komplexere Projekte geht, wird die Art und Weise, wie Sie Ihren Code organisieren, entscheidend. Die Struktur des Codes ist umso wichtiger, wenn Sie in einem Team arbeiten, das aus mehreren Front-End- und Back-End-Entwicklern besteht. Der andere Teil davon ist für mich, dass es so einfach zu der Art und Weise passt, wie ich CSS jetzt schreiben möchte. Ich habe mich schon lange vor meiner Zugehörigkeit zum Origami-Team mehr auf eine komponentenbasierte Architektur konzentriert, und dafür macht BEM einfach Sinn. Ich finde, es hilft mir auch, über die Komponenten nachzudenken, die ich schreibe, wenn die Selektoren beginnen, verwirrend zu werden oder zu viele für eine einzelne Komponente, ich weiß, es ist Zeit, über die Aufspaltung der Dinge nachzudenken.

Wie ich bereits erwähnte, begann ich mit DER Verwendung von BEM in der Umgestaltung der Persil-Website und das machte wirklich einen Unterschied, wenn es darum ging, Code zu unterteilen und große Dateien in zugänglichere Stücke aufzuteilen. Im Allgemeinen kann ich leute sehen, die sich für eine Bibliothek entscheiden und sich daran halten. Ein typisches Muster besteht darin, eine Ebene zwischen Komponenten und der Stylingbibliothek so zu erstellen, dass die Komponenten sich dessen nicht bewusst sind und leicht ersetzt werden können. Aus Sicherheitsgründen, denke ich. Die Tatsache, dass CSSinJS Bibliotheken sind, bedeutet auch, dass es in der Regel keine Regeln oder Konventionen zu befolgen. Ich habe dieses Problem in letzter Zeit immer häufiger konfrontiert. Die Menschen neigen dazu, ohne Grund im Internet zu kämpfen, und “Rahmenkriege” sind sehr heiß. Wenn es um das CSS in JavaScript Thema kommt, sagen mir die Leute oft: “Sie sollten lernen, wie man echtes CSS schreibt!”.

Aber in Bezug auf das ganze “geheime Rezept” zu schreiben mehr “website-wide” CSS, Ich glaube nicht, dass dies zu viel für Origami gilt. Meistens, weil wir nur Komponenten schreiben, damit andere sie konsumieren können. Es bedeutet, dass unser Code konsistent sein muss, was durch die Verwendung einer Kombination von Techniken über Komponenten hinweg dazu gelangen könnte, dem CSS anderer Personen im Weg zu stehen. Wir halten uns also hauptsächlich an die Verwendung von BEM-Konventionen und jeder Komponentencode ist mit dem Komponentennamen benennt, so dass BEM in diesen Fällen für uns sehr sinnvoll ist. Wie entscheiden Sie, was ein Block ist? Sicherlich ist die gesamte Seite kein einziger Block, aber wie entscheiden Sie, wie Sie sie zersetzen können? Wie benennen Sie Elemente, deren einziger Zweck darin besteht, dass einige CSS-Hack/Feature funktionieren? Stellen Sie sich vor, Sie haben ein Heldenelement, das für das Auge nur eine Überschrift und einen Slogan als vorgebliche Kinder enthält. Sie würden ihre Klassen lieben, um .hero, .hero__headline und .hero__tagline zu sein, aber Sie brauchten ein paar Zwischenelemente, um ein Designziel zu erreichen (z. B. einen Wrapper, einen Pre-Flexbox-Container für vertikale Zentrierung – verwenden Sie Ihre Phantasie). Diese Elemente brauchen Stile, also sind Sie gezwungen, .hero__wrapper__container__headline zu schreiben? Manchmal tue ich es, aber ich halte es auch für eine reductio ad absurdam für die gesamte Konvention. Andere Male fudge ich und sage” “das Wrapper-Element ist nicht so sehr ein Kind des Elternteils als Teil der Implementierung des Blocks, also nenne ich es .hero–wrapper und verkleinere die Länge der untergeordneten Selektoren um eins.” Aber das verwässert die Namenskonvention. Ich habe festgestellt, dass es besser ist, Ihre Stile auf eine Weise zu schreiben, die am einfachsten verstanden werden kann, anstatt an einer bestimmten Methode zum Schreiben von CSS festzuhalten.

Wenn die Komponente beispielsweise immer eine fett formatierte Überschrift haben sollte, passt der Stil wahrscheinlich am besten in die Komponente CSS, während es sich nur um eine einzelne Instanz einer Komponente mit einer fett formatierten Überschrift handelt, sie von einer Dienstprogrammklasse festgelegt werden könnte.