Powrót

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:

  • 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:

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:

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

selektory do pracy z JS:

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

 

Tools:

  • 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 {
  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ę.

 

 

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