Шаг 5. Стили, применяемые ко всему приложению

При сборке проекта нет отдельного файла .css — единственным расширением, которое поддерживает браузер. Может возникнуть резонный вопрос: где находятся стили, когда приложение работает?

Ответ прост. Если мы посмотрим в main.js директории dist, собранной в продакшн-режиме, то увидим там множество одновременно знакомых и нечитаемых символов. Присмотревшись, там можно найти записи, относящиеся к объявлениям классов для отдельных элементов, и их стили.

На самом деле в проекте нет привычных нам стилей — когда используются файлы с расширением .css. Но для примера работы со стилями придётся его добавить. Для этого возьмём стили из пакета normalize. Этот пакет нужен для базового сброса стилей.

Убедиться в правильности проделанной работы нам помогут инструменты разработчика в Google Chrome.

normalize.css успешно работает, и стили минимизированы в одну строку

Что такое normalize и сброс стилей

Порой разработчики перед началом работы над проектом добавляют в головной CSS-файл подобные записи, чтобы сбросить отступы на странице.

* {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}

Оптимальное решение для внесения подобных записей и сброса стилей — использовать пакет normalize. Это ресеттер для стилей, своего рода стандарт разработки. Каждый браузер имеет свои значения (по умолчанию для разных HTML-элементов), а с помощью сброса мы можем убирать эту разницу, тем самым обеспечивая кроссбраузерность стилей.