CSS
CSS-Entwurfsmuster

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
Suche…


Einführung

Diese Beispiele dienen der Dokumentation von CSS-spezifischen Entwurfsmustern wie BEM , OOCSS und SMACSS .

Diese Beispiele dienen NICHT zum Dokumentieren von CSS-Frameworks wie Bootstrap oder Foundation .

Bemerkungen

Diese Beispiele dienen der Dokumentation von CSS-spezifischen Methoden / Entwurfsmustern.

Diese Methoden umfassen Folgendes, sind jedoch nicht ausschließlich:

Diese Beispiele dienen NICHT zum Dokumentieren von CSS-Frameworks wie Bootstrap oder Foundation . Sie können zwar Beispiele für die Anwendung eines oder mehrerer CSS-Methoden / Designmuster in einem CSS-Framework hinzufügen, diese Beispiele konzentrieren sich jedoch auf die Methodologien / Designmuster mit diesem speziellen Framework und auf die Verwendung des Frameworks selbst.

BEM

BEM steht für Blocks, Elements and Modifiers . Diese Methode wurde ursprünglich vom russischen Technologieunternehmen Yandex konzipiert , erlangte jedoch auch bei amerikanischen und westeuropäischen Webentwicklern eine gewisse Wirkung.

Wie das Gleiche impliziert, geht es bei der BEM-Methode um die Komponentisierung Ihres HTML- und CSS-Codes in drei Arten von Komponenten:

  • Blöcke: eigenständige Objekte, die eigenständig Bedeutung haben

    Beispiele sind header , container , menu , checkbox und textbox

  • Elemente: Teil von Blöcken, die keine eigenständige Bedeutung haben und semantisch an ihre Blöcke gebunden sind.

    Beispiele sind menu item , list item , checkbox caption und header title

  • Modifikatoren: Markierungen für einen Block oder ein Element, mit denen das Aussehen oder Verhalten geändert werden soll

    Beispiele hierfür sind disabled , highlighted , checked , fixed , size big und color yellow

Das Ziel von BEM ist es, die Lesbarkeit, Wartbarkeit und Flexibilität Ihres CSS-Codes zu optimieren. Um dies zu erreichen, müssen Sie die folgenden Regeln anwenden.

  • Blockstile sind niemals von anderen Elementen auf einer Seite abhängig
  • Blöcke sollten einen einfachen, kurzen Namen haben und _ oder - Zeichen vermeiden
  • Verwenden Sie bei der blockname__elementname Elementen Selektoren des Formats blockname__elementname
  • Verwenden Sie beim blockname--modifiername Selektoren für das Format blockname--modifiername und blockname__elementname--modifiername
  • Elemente oder Blöcke, die über Modifizierer verfügen, sollten alles von dem Block oder Element erben, der geändert wird, mit Ausnahme der Eigenschaften, die der Modifizierer ändern soll

Code-Beispiel

Wenn Sie BEM auf Ihre Formularelemente anwenden, sollten Ihre CSS-Selektoren in etwa wie folgt aussehen: 

.form { }                       // Block
.form--theme-xmas { }           // Block + modifier
.form--simple { }               // Block + modifier
.form__input { }                // Block > element
.form__submit { }               // Block > element
.form__submit--disabled { }     // Block > element + modifier

Das entsprechende HTML sollte ungefähr so ​​aussehen: 

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow