CSS
CSS-ontwerppatronen

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


Invoering

Deze voorbeelden zijn voor het documenteren van CSS-specifieke ontwerppatronen zoals BEM , OOCSS en SMACSS .

Deze voorbeelden zijn NIET bedoeld voor het documenteren van CSS-frameworks zoals Bootstrap of Foundation .

Opmerkingen

Deze voorbeelden zijn voor het documenteren van CSS-specifieke methoden / ontwerppatronen.

Deze methoden omvatten maar zijn niet exclusief voor het volgende:

Deze voorbeelden zijn NIET bedoeld voor het documenteren van CSS-frameworks zoals Bootstrap of Foundation . Hoewel u voorbeelden kunt toevoegen van het toepassen van een of meer CSS-methodologie / ontwerppatroon met een CSS-framework, moeten die voorbeelden zich concentreren op de methodologieën / ontwerppatronen met dat specifieke framework en op het gebruik van het framework zelf.

BEM

BEM staat voor Blocks, Elements and Modifiers . Het is een methode die aanvankelijk is bedacht door het Russische technologiebedrijf Yandex , maar die ook behoorlijk wat grip heeft gekregen bij Amerikaanse en West-Europese webontwikkelaars.

Zoals hetzelfde impliceert, draait BEM-metholologie om de componenten van uw HTML- en CSS-code in drie soorten componenten:

  • Blokken: zelfstandige entiteiten die op zichzelf betekenisvol zijn

    Voorbeelden zijn header , container , menu , checkbox & textbox

  • Elementen: onderdeel van blokken die geen zelfstandige betekenis hebben en semantisch aan hun blokken zijn gekoppeld.

    Voorbeelden zijn menu item , list item , checkbox caption & header title

  • Modifiers: vlaggen op een blok of element, gebruikt om het uiterlijk of gedrag te veranderen

    Voorbeelden zijn disabled , highlighted , checked , fixed , size big en color yellow

Het doel van BEM is om de leesbaarheid, onderhoudbaarheid en flexibiliteit van uw CSS-code te blijven optimaliseren. De manier om dit te bereiken, is door de volgende regels toe te passen.

  • Blokstijlen zijn nooit afhankelijk van andere elementen op een pagina
  • Blokken moeten een eenvoudige, korte naam hebben en voorkomen _ of - tekens
  • Gebruik bij het stileren van elementen selectors van format blockname__elementname
  • Gebruik bij het stylen van modifiers selectors van de indeling blockname--modifiername en blockname__elementname--modifiername
  • Elementen of blokken met modificatoren moeten alles erven van het blok of element dat wordt gewijzigd, behalve de eigenschappen die de modificator moet wijzigen

Code voorbeeld

Als u BEM op uw formulierelementen toepast, moeten uw CSS-selectors er ongeveer zo uitzien: 

.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

De bijbehorende HTML zou er ongeveer zo uit moeten zien: 

<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
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow