@Evtera

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

Добрый день. Сверстал главную страницу, заказчик попросил сделать внутренние страницы, но опыта верстки многостраничников у меня нет.
На внутренних страницах есть схожие элементы ( подвал. навигация с некоторыми изменениями). Как Корректно использовать CSS? Дополнять старый или создавать под каждую страницу новый файл стилей? Что нужно учитывать?
Если можно,буду рад ссылке на толковую статью.
  • Вопрос задан
  • 1016 просмотров
Решения вопроса 2
@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);
}
Ответ написан
Комментировать
@Andrew0610
Мой совет, sass с импортом. Выделяешь паттерны своей верстки ( например контейнер такой то ширины, текст такой то, цвета и т д) и делаешь базовый мейн файл саса. А дальше импортишь его и подключаешь страницы. У тебя будет общий стиль сайта а потом ты просто в каждой странице дополняешь и редактируешь что нужно. Таким принципом тот же бутстрап работает. Плюс миксины, тоже очень удобно.
Ну и само собой в html просто делаешь общие имена стилий и добавляешь индивидуальные, если необходимо. Например у тебя будет class = "button button_confirm" первый стиль базовый второй уже конкретная надстройка на кнопку
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
profesor08
@profesor08 Куратор тега CSS
Скопипасти html в новый файл. В файл стилей добавь нужные.
Ответ написан
AntonLitvinenko
@AntonLitvinenko
HTML coder
Я тоже периодически задаюсь похожим вопросом. И если для html вполне можно пользоваться копипастом или, например, gulp-rigger в сборщике, то со стилями вечная проблема. Особенно если макеты страниц добавляются постепенно. И особенно если гадкий дизайнер не придерживается какой-то системы. И ты делал например блок features на главной и классы обзывал подобным образом и тут бац! Появляется страница features с похожими но отличающимися элементами. И в большинстве случаев проще скопипастить стили и немного изменить и код разрастается, разрастается...
Bem хороший помощник, если адекватный дизайнер, и в макете реально есть реиспользуемые блоки.
Фишку с добавлением дополнительного класса часто использую. Это в сторону бем, но не так глобально
Ответ написан
Комментировать
@alphaDzhem
Продолжающий front-end разработчик и не только
Попробуйте использовать шаблонизатор. Например jekyll.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы