Когда много страниц для верстки свыше 7 веб страниц, как делается тогда верстка, если каждая страница разная по дизайну?

Question

[Alexander Lamdan]

Пишу HTML и архитектуру каждой веб страницы, делаю ее удобной для людей с ограниченными возможностями, пока классы и id не пишу.

И тут встал вопрос, как тогда делается верстка? Страниц полно, меню и футер одинаковы, а вот сам контент разный чуть ли не с нуля придется все верстать.

Как писать grid или/и flexbox для каждой страницы, чтобы потом не переписывать?

По идее у меня scss файл с названием к каждой страницы, а потом это все объединяется в один большой файл style.scss где потом компилируется в style.css

А стоит ли так писать? Или стоит каждой странице делать отдельный css файл?

Сразу скажу что я не использую никакие фреймворки, библиотеки и тд чтобы не угрохать себе скорость загрузки сайта.

Comments

[alexalexes]

Делаете какой-нибудь файл common.css для селекторов стилей, которые встречаются в 80% страниц сайта (меню и футер одинаковы, как вы говорите, значит их стили прописываются тут). Также может быть общий файл стилей в рамках не всего сайта, а какого-нибудь большого раздела, где дизайн более менее одинаков.
Для контента страницы подключаете свой файл стилей или локализуете стили нескольких страниц в одном файле в рамках одного раздела.

делаю ее удобной для людей с ограниченными возможностями, пока классы и id не пишу.

Мне попадалась такая задача.
Если на сайте включен режим для слабовидящих, то в body пишем класс этого режима.
Например, нужно сделать страницы контрастно черно-белыми и увеличить шрифт, тогда в body пишем class="specview-scheme-bw specview-font-big"
specview-scheme-bw - этот класс будет определять чб схему отображения
specview-font-big - этот класс будет определять увеличенный шрифт
Для режима подключаем дополнительный файл стилей, назовем его specview.css
который частично переопределит стили страницы, например, сделает границы блока чб:

body.specview-scheme-bw div.какой-то-блок
{
  border-color: #333; 
}

... или увеличит размер шрифта у заголовка h1

body.specview-font-big h1
{
  font-size: 120%;
}

У каждого селектора будет в начале 1 или 2 класса для body - будет определять комбинацию параметров режима, когда применять изменения стилей.
Стили каждого элемента страницы в версии для слабовидящих нужно будет слегка доправить этим подключенным файлом.

Answer 1

[Александр Маджугин]

Поскольку два варианта из трех уже предложили, я предложу оставшийся: делаешь все так же как предложил Vladislav но стили хедера и футера, а так же общие стили страниц (ведь не смотря на то, что они очень разные, у них наверняка есть похожие элементы - например стили заголовков, абазцев и т.д.) объединяешь в один отдельный файл - layout.css
Этот файл подключаешь для каждой страницы + ее собственный файл стилей. Таким образом у тебя будет два набора стилей - общие + персональные для каждой страницы. При этом ты получишь то же удобство работы что и в варианте с отдельным файлом для каждой, но и одновременно стиль layout.css, будучи общим, будет кэшироваться уже после просмотра первой страницы и оставаться у пользователя, обеспечивая в том числе более быстрые и загрузку, и отображение последующих страниц.

Answer 2

[Vladislav]

Как я понял ты юзаешь препроцессор sass в синтаксисе scss, создаешь тогда файл style.scss и туда импортируешь стили шапки и футера, затем для каждой страницы создаешь свой собственный файл, например для index.html файл home.scss и туда импортируешь стили всех секций, которые у тебя на главной, а если к примеру у тебя есть секция со слайдером, а потом она есть и на другой странице, то просто импортируешь стили этой секции слайдера на другую страницу где она есть, ну и разметку собственно так же копируешь или если pug делаешь импорт, а также используй модульный подход для каждой страницы, почитай об этом, модули обеспечат тебе поддержку проекта и его разработку, все исходники не будут одном файле и не запутают тебя, это касается как и стилей так и pug, ну и js собственно, если у тебя webpack и при компиляции не объединеняй все в один, должно быть два файла css, файл со стилями шапки и футера и файл со стилями страницы, тоже и касается js файлов

Answer 3

[Sanes]

Один CSS на весь проект. Для разработки можете разделять на разные, как вам удобно.

Comments

[Alexander Lamdan]

А это не станет слишком тяжелым, если все в один css все компилировать из scss?

[Sanes]

Тяжелый это сколько?

[Alexander Lamdan]

Sanes, свыше 200кб?

[Sanes]

Alexander Lamdan, минифицированный?

[Alexander Lamdan]

Sanes, ну скажем да

[Sanes]

Alexander Lamdan, это не много. Но очень похоже, что неоптимально. Плохо представляю, что там такого должно быть. У довольно богатых фреймворков столько кода.

[Vladislav]

Sanes, у богатых фреймворках оптимизация лучше, чем у нативной верстки, не путайте, там spa, а тут обычный нативный сайт

[Vladislav]

Alexander Lamdan, станет, прочитай ответ ниже я описал