Как писать стили на многостраничных сайтах?

Question

[Aristotel Paskalov]

Всем доброй ночи.
До этого времени я всегда верстал только одностраничные сайты, а сейчас появился заказ на вёрстку многостраничника (около 16 страниц)

Я не совсем могу понять логику вёрстки таких сайтов.
Допустим, у меня будет 16 .html файлов, а CSS файл должен выйти лишь 1?
Если этот CSS файл всего один, боюсь, что верстая 16 страниц я могу по ошибке задавать html элементам одинаковые классы, переопределять их стили и всё будет сбиваться

Верстаю без сборщика, чистый html / css

Подскажите пожалуйста, как правильнее задавать классы и писать стили для многостраничных сайтов?

Comments

[generate]

Селекторы ?

.page_1 > div {

}

.page_2 > div {

}

[Антон Литвиненко]

Бывают затыки, когда на главной есть категории и продукты, в сайдбар они же, а ещё страница категорий с продуктами и везде разный дизайн.
Тогда приходится каждый раз изголяться с именем класса

Answer 1

[Danny Arty]

Если у вас есть дизайн сайта, то в чем проблема?

Если этот CSS файл всего один, боюсь, что верстая 16 страниц я могу по ошибке задавать html элементам одинаковые классы, переопределять их стили и всё будет сбиваться

Основные элементы, такие как шапка сайта, заголовки страниц, подзаголовки, элементы-обертки, кнопки, формы и тд скорее всего будут иметь один стиль (если нет, то тут уже вопросы к дизайнеру), так что это уже не проблема.

А остальным элементам задавайте классы так, чтобы они отображали содержимое. Например есть страница Акции, в которой соответственно расположены блоки с акциями, каждый из которых включает в себя название и описание.
Так вот классы, например по БЭМ, будут условно выглядеть так:

<div class="sales"> 
    <h3 class="subtitle">Акции</h3> <!-- Подзаголовок-->
    <ul class="sales__list">
      <li class="sales__item">
        <h4 class="sales__title">Заголовок акции</h4>
        <p class="sales__text">Описание акции</p>
      </li>
      <li class="sales__item">
        <h4 class="sales__title">Заголовок следующей акции</h4>
        <p class="sales__text">Описание следующей акции</p>
      </li>
    </ul>
</div>

ЗЫ: На вкус и цвет, как говорится, фломастеры разные. Это всего лишь пример.