BEM, Cascading Stile und Classitis?

Question

Ich versuche, für das Web zu Front-End-Codierung zurückzukehren. Das letzte Mal, als ich versuchte, CSS zu schreiben, war vor 10 Jahren, und damals gab es eine Krankheit namens classitis. Mein Verständnis von Classitis ist vielleicht falsch, aber ich habe es so gewählt, dass Sie Ihr HTML-Dokument nicht mit zu vielen CSS-Klassen überladen und versuchen, Cascading-Regeln zu verwenden, um Ihre HTML-Markierung sauber und schlank zu halten. Mit dem Vorteil von kaskadierenden Regeln in CSS

Zum Beispiel könnte dies classitis

<ul class="feed"> 
<li class="item"> 
<img src="" class="thumbnail"/> 
<a href="" class="read-more">Read More</a> 
</li> 
</ul> 

sein, wir alle Klassen außer class="feed" entfernen konnte und dann CSS-Regeln wie

.feed li img {/*style*/} 
.feed li a {/*style*/} 

Diese schreiben Es gibt einen größeren Grad an Trennung zwischen Inhalt und Präsentation.

Allerdings gebe ich zu, dass bei sehr großen Web-Anwendungen leicht vergessen werden kann, was was kaskadiert, und wenn andere Teammitglieder dem Projekt beitreten, haben sie eher Schwierigkeiten, die gesamte Front-End-Architektur zu erfassen. Und es wird noch schwieriger, wenn Sie versuchen, das Projekt neu zu faktorisieren, wenn Sie nicht das beste Root-Element zum Markieren Ihrer Klasse ausgewählt haben.

Ich finde, BEM ist sehr nützlich, da die Klassenbenennungskonventionen eindeutig angeben, was jeder Block und jedes Element tun soll. Bedeutet das nicht, dass Sie eine Klassitis wieder einführen und auch zugeben, dass die Trennung von Präsentation und Inhalt eine unerreichbare Fantasie ist? Das ist meine Frage.

Hinweis - Ich sehe einige Leute classitis definiert als wiederholende Klassennamen innerhalb von Elementen eines Blocks (z. B. Eltern, Kind und Enkelkind sind alle die gleiche Klasse nennen). Nicht sicher, ob das zu der Zeit die von der Branche akzeptierte Definition war, oder ob die Definition von classitis allgemeiner war als die Einführung von CSS-Klassen/ids, wenn Sie stattdessen Cascading-Regeln hätten verwenden können.

Answer 1

Alles, was neuerdings sagt, ob Classitis, Divitis, nicht-semantische Elemente und alles, was die Fusion von Präsentation und Inhalt fördert, eine gute Sache ist?

OOCSS und BEM sind zwei CSS-Methoden, die vor ein paar Jahren entstanden sind. Sie haben gute Praktiken umgekehrt.

Der CSS-Code wird verwendet, um Inhaltsblöcke zu kleiden. Stellen Sie sich vor, wir müssen zwei verschiedene Kleider für Albert und Nicolas kreieren. Die naive Methode ist es, diese zwei Kleidungsstücke so zu benennen: "Alberts Gewohnheit" und "Nicolas 'Gewohnheit". Es ist eine Benennung nach der Semantik des Inhalts.

Dann kommt Pierre und wir müssen ihn verkleiden. Aber unsere Benennung verhindert Wiederverwendung. Es ist notwendig, eine neue "Pierre Gewohnheit" zu erstellen, auch wenn diese der von Albert sehr ähnlich wäre.

Wenn Kleidung Design unser Geschäft wird, dann werden wir die Art, wie wir arbeiten, ändern, um es uns zu erleichtern, unsere Arbeit wiederzuverwenden. Wir werden absichtlich die Benennung durch den Inhalt (die gekleidete Person) vermeiden. Wir bevorzugen es, die Kleidung selbst zu benennen. Es könnte abstrakte Namen sein: "Habit 001", "Gewohnheit 002", etc. Warum nicht? Es wäre wiederverwendbar.Aber eine intuitivere Benennung erfordert weniger Anstrengung des Auswendiglernens und wir nennen entsprechend, was wir sehen: "Die große und blaue Gewohnheit", "Die kleine aber breite Gewohnheit", etc. Und so trägt Albert " die große und blaue Gewohnheit " eher als " Alberts Gewohnheit ". Es geht nicht darum, Präsentation und Inhalt zu mischen. Die Semantik für die Bezeichnung der Verpackung ist nicht mehr die des Inhalts, sondern die der Verpackung.

Mit der Benennung nach Inhaltssemantik war der CSS-Code tatsächlich vollständig verknüpft und von HTML-Code abhängig. Mit der Benennung des Wrappings wird der CSS-Code zu einem Code, der unabhängig von dem HTML-Code existiert, und dies ermöglicht es, dass verschiedene Blöcke im HTML-Code die gleiche Erscheinungsform besser wiederverwenden.