Редактирование CSS кода

Адаптивность

 
Для работы с адаптивностью стоит использовать заготовленные классы.

• screen-lg для широких экранов

• screen-md для ноутбуков

• screen-sm для планшетов

• screen-xs для телефонов

Рекомендуется стили для широких экранов использовать как основные, а для меньших экранов переопределять.

.demo {
  font-size: 48px;
}
.screen-md .demo {
  font-size: 36px;
}
.screen-sm .demo {
  font-size: 24px;
}
.screen-xs .demo {
  font-size: 14px;
}

Класс *`screen-`** всегда должен быть в самом начале селектора.

Инкапсуляция стилей

 
В отличие от HTML, из CSS ничего вырезаться не будет.
Во всех компонентах кроме HTML-компонента включена инкапсуляция стилей.
Это значит, что все стили могут применяться только к текущему компоненту, и его дочерним компонентам.
Технически это сделано так. Допустим, вы написали следующий код:

.demo {
  font-size: 14px;
  border: 2px solid orange;
  padding: 10px;
}

Перед появлением на странице он будет обработан, и добавлен будет в следующем виде:

.css24 .demo {
  font-size: 14px;
  border: 2px solid orange;
  padding: 10px;
}

Где css24 — класс элемента, внутри которого расположен HTML код компонента.