Powrót

BEM czyli Block, Element, Modifier

BEM – to metodologia tworzenia kodu, tworzenie kodu z podziałem na konstrukcyjne części, inaczej architektura pomocna w tworzeniu struktury HTML i nazewnictwa klas w CSS.

Idealnie nadaje się do dużych lub średnich projektów, które zawierają wiele plików, dużo różnorodnych styli i elementów HTML, ponieważ BEM pomaga uniknąć problemów takich jak nadpisywanie styli czy nie jasna konstrukcja kodu.

Cel

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

Założenia

  • każdy blok/element musi posiadać unikatową nazwę – klasę css
  • nie można stosować selektorów elementów html
  • nie stosować selektorów opartych o kaskadowość styli (selektory potomka)
  • nie stosować selektorów id

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

flaga, modyfikacja 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" class="site-search__button" value="Search">
</form>

selektory stanów

  • .is-active
  • .is-hover
  • .is-dragged

selektory do pracy z JS

  • .js-sortable
  • .js-is-active
  • .js-drag-and-drop

Narzędzia

  • en.bem.info/tools/

OOCSS:

  • .btn
  • .btn–large
  • .btn–natural
  • .btn–negative

 

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&nbsp;{
  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ę.

 

Więcej info

CSS3

Hope this helps and happy coding :)

Zobacz jeszcze

przeniesienie plików strony do katalogu

dla zwiększenia bezpieczeństwa zalecane jest wgranie plików wordpress w katalogu czyli pliki strony umieszczamy zamiast bezpośrednio w głównym katalogu domeny to w dodatkowym katalogu np....

Clearfix

.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } -- The "Clearfix"...

Powrót