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

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

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

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

.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 код компонента.