Как писать стили для множества страниц?

Question

[Андрей]

Подскажите, как правильно делать, если сайт состоит из множества страниц и все эти страницы не однотипные, а с разным оформлением, то как писать для них CSS код? Не создавать же свой отдельный CSS файл для каждой страницы, а если писать все в один CSS файл, то можно и запутаться в стилях(особенно если будут повторятся id или классы). Разъясните пожалуйста как правильно.
И еще вопрос: "Как загружает браузер стили, он грузит весь код не зависимо используется ли он на странице или загружает только тот код который принадлежит конкретному html файлу? И например есть анимация при наведении, то браузер подгрузит данный код в момент наведения на элемент или он сразу все загружает когда мы зашли на сайт?"
Спасибо всем кто поможет !

Answer 1

[Сергей Иванов]

Первый вопрос.
Привязывать css-правила или файлы к конкретным страницам не лучшая практика. Так или иначе на сайте используются сквозные (повторяющиеся от страницы к странице) блоки: шапка, подвал, боковое меню, кнопки, формы и т.д. и т.п. Необходимо учитывать ситуацию, при которой какой-либо блок с одной страницы сайта придётся использовать на другой. В случае же привязки стилей к какой-либо конкретной странице Вам придётся дублировать CSS, что не есть хорошо.
Если в Вашем случае страницы совсем разные и сквозных блоков нет, лучше создать несколько css-файлов с темой. Для каждой страницы своя тема: своё оформление кнопок, форм, заголовков и т.д. Данный подход позволит использовать Ваш CSS повторно, если когда-нибудь понадобиться создать страницу с тем же оформлением, что у одной из существующих на данный момент.
Лучше придерживаться следующего правила: классы используются для оформления (CSS), идентификаторы - для подключения скриптов (JS).

Второй вопрос.
Браузер применяет все стили, полученные в запрошенном css-файле. Почитайте о механизме ренедринга стилей браузером, можно узнать много нового!
CSS-анимация в Вашем случае применится в момент наведения на элемент. Тогда же будут задействованы ресурсы браузера для её отрисовки. Загрузка стилей анимации не имеет никакого отношения к процессу её непосредственного старта.

Answer 2

[alvvi]

Не создавать же свой отдельный CSS файл для каждой страницы

Why not?
Сделайте файл с общими стилями и файлы для каждой странице.
Это конечно если у вас там много стилей, в других случаях можно все вместе сбандлить на продакшн.
А вот в разработке, имхо, даже по странице делить не очень, используйте БЭМ или что-то подобное.

он сразу все загружает когда мы зашли на сайт?

По умолчанию так, но можно загружать что-то асинхронно.

Answer 3

[iBird Rose]

Не создавать же свой отдельный CSS файл для каждой страницы, а если писать все в один CSS файл, то можно и запутаться в стилях

тут есть 2 варианта:
1) Создавать отдельные css - и потом с помощью, к примеру сборщиков(gulp), объединять все эти файлы в один.
2) нормально документировать свой css, тогда не запутаешься. Даже крупные сайты имеют css файлы не больше пару тыщ строк. если нормально писать комментарии - запутаться сложно.

Как загружает браузер стили

грузят все и сразу