Работа с уровнями переопределения

Применение принципов БЭМ-методологии к CSS позволяет разделять представление блоков по разным уровням.

Разделение по уровням позволяет:

• реализовывать новый внешний вид блока на другом уровне переопределения, сохраняя предыдущий, наследовать и дополнять его;
• полностью перекрывать внешний вид блока (переопределять);
• добавлять блоки с новым представлением.

С помощью уровней переопределения можно создать универсальную CSS-библиотеку блоков и изменять ее на проектном уровне. Затем использовать сборку и включать в проект только необходимое представление блоков.

Пример

common.blocks/ 
    button/ 
        button.css # Базовая CSS-реализация кнопки 

desktop.blocks/ 
    button/ 
        button.css # Особенности кнопки для desktop 

mobile.blocks/ 
    button/ button.css # Особенности кнопки для mobile

При сборке в файл desktop.css попадут все базовые CSS-правила кнопки с уровня common и переопределенные правила с уровня desktop.

@import "common.blocks/button/button.css";  /* Базовые CSS-правила */ 
@import "desktop.blocks/button/button.css"; /* Особенности desktop */

Файл mobile.css будет включать базовые CSS-правила кнопки с уровня common и переопределенные правила с уровня mobile.

@import "common.blocks/button/button.css"; /* Базовые CSS-правила */ 
@import "mobile.blocks/button/button.css"; /* Особенности mobile */

Разделение представления блока button по разным уровням позволяет:

• Полностью перекрыть внешний вид блока на другом уровне переопределения. common.blocks/button/button.css

.button { 
  font-family: Arial, sans-serif; 
  font-size: 11px; 
  line-height: 24px; 
  background: #fff; 
}

desktop.blocks/button/button.css

.button { 
  font-family: 'Roboto', sans-serif; 
  font-size: 13px; 
  line-height: 28px; 
  background: yellow; 
}

• Добавить или частично изменить внешний вид блока на другом уровне переопределения. common.blocks/button/button.css

.button { 
  font-family: Arial, sans-serif; 
  font-size: 11px; 
  line-height: 24px; 
  background: #fff; 
}

desktop.blocks/button/button.css

.button { 
  background: #fff; 
  color: rgb(255, 0, 0); 
  box-shadow: 0 0 10px rgba(0,0,0,0.5); 
}