CSS
CSS designmönster

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


Introduktion

Dessa exempel är för att dokumentera CSS-specifika designmönster som BEM , OOCSS och SMACSS .

Dessa exempel är INTE för att dokumentera CSS-ramar som Bootstrap eller Foundation .

Anmärkningar

Dessa exempel är för att dokumentera CSS-specifika metoder / designmönster.

Dessa metoder inkluderar men är inte exklusiva för följande:

Dessa exempel är INTE för att dokumentera CSS-ramar som Bootstrap eller Foundation . Även om du kan inkludera exempel på hur du tillämpar en eller flera CSS-metoder / designmönster med ett CSS-ramverk, är dessa exempel att fokusera på metodologier / designmönster med det specifika ramverket och på användningen av själva ramverket.

BEM

BEM står för Blocks, Elements and Modifiers . Det är en metod som ursprungligen utformats av det ryska teknikföretaget Yandex , men som också fick en del dragkraft bland amerikanska och västeuropeiska webbutvecklare också.

Som samma innebär handlar BEM-metolologi om komponentisering av din HTML- och CSS-kod i tre typer av komponenter:

  • Block: fristående enheter som är meningsfulla på egen hand

    Exempel är header , container , menu , checkbox och textbox

  • Element: Del av block som inte har någon fristående betydelse och som är semantiskt bundna till sina block.

    Exempel är menu item , list item , checkbox caption & header title

  • Modifierare: flaggor på ett block eller element, som används för att ändra utseende eller beteende

    Exempel är disabled , highlighted , checked , fixed , size big och color yellow

Målet med BEM är att hålla din CSS-kod läsbarhet, underhållbarhet och flexibilitet. Sättet att uppnå detta är att tillämpa följande regler.

  • Blockstilar är aldrig beroende av andra element på en sida
  • Block bör ha ett enkelt, kort namn och undvika _ eller - tecken
  • När du utformar element använder du väljare för blockname__elementname
  • När du ändrar modifierare använder du väljare för blockname--modifiername och blockname__elementname--modifiername
  • Element eller block som har modifierare bör ärva allt från blocket eller elementet som det modifierar förutom egenskaperna som modifieraren ska förändra

Kodsexempel

Om du tillämpar BEM på dina formelement, bör dina CSS-väljare se ut så här: 

.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

Motsvarande HTML ska se ut så här: 

<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
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow