CSS
Шаблоны проектирования CSS

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
Поиск…


Вступление

Эти примеры предназначены для документирования CSS-специфических шаблонов проектирования, таких как BEM , OOCSS и SMACSS .

Эти примеры НЕ предназначены для документирования фреймворков CSS, таких как Bootstrap или Foundation .

замечания

Эти примеры предназначены для документирования CSS-специфических методологий / шаблонов проектирования.

Эти методологии включают, но не ограничиваются следующим:

Эти примеры НЕ предназначены для документирования фреймворков CSS, таких как Bootstrap или Foundation . Хотя вы можете включить примеры того, как применять одну или несколько методологий / шаблонов CSS с CSS-структурой, эти примеры должны сосредоточиться на методологиях / шаблонах проектирования с этой конкретной структурой и на использовании самой структуры.

BEM

BEM обозначает Blocks, Elements and Modifiers . Это методология, первоначально задуманная российской технологической компанией Yandex , но которая приобрела немалую тягу среди американских и западноевропейских веб-разработчиков.

Как следует из этого, методология BEM - это все, что касается компонентности вашего кода HTML и CSS в трех типах компонентов:

  • Блоки: автономные объекты, которые имеют смысл сами по себе

    Примерами являются header , container , menu , checkbox и textbox

  • Элементы: часть блоков, которые не имеют отдельного значения и семантически привязаны к их блокам.

    Примерами являются menu item list item , checkbox caption и header title

  • Модификаторы: флаги на блоке или элементе, используемые для изменения внешнего вида или поведения

    Примерами являются disabled , highlighted , checked , fixed , size big и color yellow

Цель BEM - оптимизировать читаемость, удобство обслуживания и гибкость вашего CSS-кода. Способ достижения этого - применить следующие правила.

  • Стили блоков никогда не зависят от других элементов на странице
  • Блоки должны иметь простое, короткое имя и избегать _ или - символов
  • При стилизации элементов используйте селектор формата blockname__elementname
  • При модификаторах стилей используйте селектора формата blockname--modifiername и blockname__elementname--modifiername
  • Элементы или блоки, которые имеют модификаторы, должны наследовать все от блока или элемента, который он модифицирует, кроме свойств, которые должен модифицировать модификатор

Пример кода

Если вы примените BEM к вашим элементам формы, ваши селекторы CSS должны выглядеть примерно так: 

.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

Соответствующий HTML должен выглядеть примерно так: 

<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
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow