BEM czyli Block, Element, Modifier

metodologia tworzenia kodu, tworzenie kodu z podziałem na konstrukcyjne części.

 

cel: uniknięcie specyficzności i dziedziczenia selektorów CSS

 

Założenia:

 

BLOCK:

samodzielna jednostka, niezależne tak by można było je zagnieżdżać, przeciągać, zamieniać miejscami w kodzie bez dokonywania zmian.

jak: header, container, menu, checkbox, input

 

ELEMENT:

część bloku, bez samodzielnej egzystencji. Semantycznie związane z blokiem w którym się znajdują.

jak: menu item, list item, checkbox caption, header title

 

MODIFIER:

modyfikacje bloków lub elementów. Nadaje zmianę wyglądu lub zachowania.

jak: disabled, highlighted, checked, fixed, size big, color yellow

 


.block {}

.block__element {}

.block--modifier {}



.person {}

.person--woman {}

.person__hand {}

.person__hand--left {}

.person__hand--right {}



<form class="site-search site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit" value ="Search" class="site-search__button">
</form>



 

selektory stanów:

selektory do pracy z JS:

 

Tools:

 

OOCSS:

 

Wielkość testu em/rem – zwiększona dostępność:

@mixin font-size($font-size) {

font-size: $font-size + px;

font-size: $font-size / $base-font-size + rem;

}

 

zamiast stylowania warunkowego ([if lt IE 7], [if gt IE 8]) – klasa nadawana <html> (w HTML5 Boilerplate)


.myClass {
  width:100px;
  height:500px;
  padding:10px;
  margin-top:10px;
  background:red;
  border-bottom:1px solid black;
  text-align:center;
  color:#fff;
}

Co daje BEM:

MODUŁOWOŚĆ:

bloki stałe nie zależą od innych elementów na stronie, nie tworzymy kaskadowości. Dzięki temu mamy możliwy transfer bloków w dowolne miejsce strony lub do innego projektu.

 

STRUKTURA:

Metodologia BEM daje prostą i zrozumiałą strukturę.

 

 

#css

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.