CSS
Wzory projektowe CSS

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


Wprowadzenie

Te przykłady dotyczą dokumentowania specyficznych dla CSS wzorców projektowych, takich jak BEM , OOCSS i SMACSS .

Te przykłady NIE służą do dokumentowania środowisk CSS, takich jak Bootstrap lub Foundation .

Uwagi

Te przykłady służą do dokumentowania specyficznych dla CSS metodologii / wzorców projektowych.

Metodologie te obejmują między innymi:

Te przykłady NIE służą do dokumentowania środowisk CSS, takich jak Bootstrap lub Foundation . Chociaż możesz dołączyć przykłady zastosowania jednej lub więcej metodologii / wzorca projektowego CSS w ramach CSS, przykłady te mają skupić się na metodologii / wzorcach projektowych w tym konkretnym frameworku i na wykorzystaniu samego frameworka.

BEM

BEM oznacza Blocks, Elements and Modifiers . Jest to metodologia początkowo opracowana przez rosyjską firmę technologiczną Yandex , która jednak zyskała sporą popularność także wśród amerykańskich i zachodnioeuropejskich twórców stron internetowych.

Jak to samo sugeruje, metamologia BEM polega na podziale kodu HTML i CSS na trzy typy komponentów:

  • Bloki: samodzielne jednostki, które same w sobie są znaczące

    Przykładami są header , container , menu , checkbox i textbox

  • Elementy: część bloków, które nie mają samodzielnego znaczenia i są semantycznie powiązane z ich blokami.

    Przykładami są menu item list item , checkbox caption i header title

  • Modyfikatory: flagi na bloku lub elemencie, używane do zmiany wyglądu lub zachowania

    Przykłady są disabled , highlighted , checked , fixed , size big i color yellow

Celem BEM jest optymalizacja czytelności, łatwości konserwacji i elastyczności kodu CSS. Sposobem na osiągnięcie tego jest zastosowanie następujących zasad.

  • Style bloków nigdy nie są zależne od innych elementów na stronie
  • Bloki powinny mieć prostą, krótką nazwę i unikać znaków _ lub -
  • Podczas stylizacji elementów używaj selektorów formatu blockname__elementname
  • Podczas stylizowania modyfikatorów używaj selektorów formatu blockname--modifiername i blockname__elementname--modifiername
  • Elementy lub bloki, które mają modyfikatory, powinny dziedziczyć wszystko po bloku lub elemencie, który modyfikuje, z wyjątkiem właściwości, które modyfikator ma zmodyfikować

Przykład kodu

Jeśli zastosujesz BEM do elementów formularza, selektory CSS powinny wyglądać mniej więcej tak: 

.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

Odpowiedni kod HTML powinien wyglądać mniej więcej tak: 

<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
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow