Как верстать многостраничные сайты с использованием однотипных блоков?

Question

[Evtera]

Добрый день. Сверстал главную страницу, заказчик попросил сделать внутренние страницы, но опыта верстки многостраничников у меня нет.
На внутренних страницах есть схожие элементы ( подвал. навигация с некоторыми изменениями). Как Корректно использовать CSS? Дополнять старый или создавать под каждую страницу новый файл стилей? Что нужно учитывать?
Если можно,буду рад ссылке на толковую статью.

Answer 1

[iordania]

Вам нужно копать в сторону bem(методологии) + scss, получится что-то вроде этого:

.header {
  // описываете дефолтные стили
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  color: black;
  background: white;
  &--dark-mode {
    // описываете стили для тёмного хедера, к примеру достаточно поменять только background
    color: white;
    background: black;
  }
}

а ещё можно с помощью миксина, где для каждого блока вы сможите задать свой цвет, но дефолтные стили будут одинаковые:

@mixin styleBlock($bgcolor) {
  align-items: center;
  font-size: 15px;
  cursor: pointer;
  border: 2px solid red;
  background: $bgcolor;
}

.block-1 {
  @include styleBlock(red);
}

.block-2 {
  @include styleBlock(green);
}

Answer 2

[Andrew0610]

Мой совет, sass с импортом. Выделяешь паттерны своей верстки ( например контейнер такой то ширины, текст такой то, цвета и т д) и делаешь базовый мейн файл саса. А дальше импортишь его и подключаешь страницы. У тебя будет общий стиль сайта а потом ты просто в каждой странице дополняешь и редактируешь что нужно. Таким принципом тот же бутстрап работает. Плюс миксины, тоже очень удобно.
Ну и само собой в html просто делаешь общие имена стилий и добавляешь индивидуальные, если необходимо. Например у тебя будет class = "button button_confirm" первый стиль базовый второй уже конкретная надстройка на кнопку

Answer 3

[profesor08]

Скопипасти html в новый файл. В файл стилей добавь нужные.

Comments

[Evtera]

т.е даже с учетом того, что нужно добавить незначительные элементы, всё равно придётся копипастить?

[profesor08]

Evtera, это уже другой вопрос. Используй webpack с html шаблонизатором.

Answer 4

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

Я тоже периодически задаюсь похожим вопросом. И если для html вполне можно пользоваться копипастом или, например, gulp-rigger в сборщике, то со стилями вечная проблема. Особенно если макеты страниц добавляются постепенно. И особенно если гадкий дизайнер не придерживается какой-то системы. И ты делал например блок features на главной и классы обзывал подобным образом и тут бац! Появляется страница features с похожими но отличающимися элементами. И в большинстве случаев проще скопипастить стили и немного изменить и код разрастается, разрастается...
Bem хороший помощник, если адекватный дизайнер, и в макете реально есть реиспользуемые блоки.
Фишку с добавлением дополнительного класса часто использую. Это в сторону бем, но не так глобально

Answer 5

[Дмитрий Жемчужнов]

Попробуйте использовать шаблонизатор. Например jekyll.