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

Question

[Артём Цымбалюк]

Здравствуйте. Верстаю около полугода. Но все эти полугода верстал чисто Landing Page сайты.
Для оптимизации своей работы использую готовую сборку с препроцессором SASS который на выходе даёт min.css, сделано для того, что бы css подгружался быстрее.

Появился заказ, на Landing Page , но это уже получается не лендинг а многостраничный сайт, всего 13 страниц.
На всех страницах практически нету одинаковых элементов, ну кроме шапки (и то шапка на 3х страницах другая, т.есть другой фон и цвет текста) И тут у меня возникает вопрос, а как верстать многостраничник с ракурса CSS ? Адекватно понимаю, что 13 страниц, где нету повторяющихся элементов на размер CSS файла повлияют очень сильно. Будет ли сайт очень долго грузить CSS ?

И как быть с шапкой которая на 3 страницах другая? Добавлять класс к уже существующему header ?
Буду благодарен любому ответу и совету. Ибо присутствует страх, верстки многостраничника

Answer 1

[Сергей delphinpro]

на размер CSS файла повлияют очень сильно. Будет ли сайт очень долго грузить CSS ?

не повлияют. не стоит заморачиваться.
Есть такой термин - преждевременная оптимизация. Такая оптимизация даже хуже ее полного отсутствия.

ЗЫ
Сверстай все страницы. Потом проверяйте скорость загрузки. При необходимости разобьете один файл на несколько (тем более с препроцессором это не составит труда).
Хотя я не думаю, что у вас в итоге выйдет огромный файл стилей, который нужно будет распиливать..

Answer 2

[Сергей ZSA]

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

К примеру мне мало верится что основные стили, такие как оформление заголовков, основного текста, кнопок, текстовых полей, чекбоксов и тп разнятся. Если они не разнятся - у вас дизайн сайта, если разнятся от страницы к странице и это "типа один сайт" - идите откручивать голову дизайнеру, который это рисовал, либо объясняйте заказчику, что это бред полный и так не должно быть.

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

Comments

[Артём Цымбалюк]

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

[Сергей ZSA]

Артём Цымбалюк: ну это один нормальный сайт. Тут ничего такого нет. Пишите всё в одном css, опять же максимально универсально, потому что возможно (при натяжке и последующей работе сайта на cms) эти элементы будут на разных страницах отображаться. К примеру прайс с калькулятором захотят скрестить и вывести это всё великолепие на главной.

[Артём Цымбалюк]

Сергей ZSA понял, спасибо. Но опять же размер CSS файла очень сильно влияет на загрузку страницы? И ещё я делаю вот как, так как верстаю лендинги для первого экрана я выношу стили в отдельный файл, после компилирую его в min и этот мин просто вставляю в index.html в head. Не просто подключаю его как отдельный файл, а содержимое этого min выношу в < style > < / style >. Тем самым посетитель сайта не ждёт пока под грузится CSS всей страницы. Он уже видит первый экран с CSS. Пока он изучает первый экран в это время уже подгружается весь сайт.
Опять же вопрос, стоит ли использовать такую фишку при верстке многостраничника? Но весь многостраничник выполнен в стиле лендинга, поэтому на всех страницах первый экран в 100% высоту

[Сергей ZSA]

Артём Цымбалюк: всё это очень относительно. У вас там кода будет хотя бы на 100кб ? Я в этом очень сомневаюсь. Есть задача чтоб клиент не ждал ни секунды? Если есть - общаться нужно с программистом тогда по поводу оптимизации и вывода некоторого кода в шапку, но только скорей всего для главной страницы, ведь не забывайте, что файл ваш тот самый min.css должен закешироваться у человека и естественно при загрузке следующей страницы сайта браузер ничего качать не будет. Выходит, что человек загрузит код страницы сразу при посещении главной и всё, а иначе (если выводить код вверх страницы на главной, то тогда нужно будет дублировать этот же код в css файл, потому что как вы говорите шапка то одинакова).

Конечно нужно сжимать все ваши картинки, потому как это первое, что ушатает весь ваш сайт в хлам, если будет не сжато, ну и шрифты также при необходимости сжимать.

Ах да, не забывайте, что если это многостраничный сайт, пользователь может сначала зайти совсем не на главную страницу. И что теперь нам возвращаться в 90-е и писать всё в style="" вообще?

Ну и конечно не забывайте, что в хроме есть отличная эмуляция плохого интернета, где вы сможете оттестировать полностью свой сайт как с кешем так и без него, как со стабильным 3G так и с ужасным Gprs (хотя последнего уже наверно нигде нет).

[Артём Цымбалюк]

Сергей ZSA :D Поверьте, есть) Спасибо большое за ответ, пока решением отмечать не буду, хочу послушать ещё мнения

[Сергей delphinpro]

Сергей ZSA:

Тем самым посетитель сайта не ждёт пока под грузится CSS всей страницы

А чего он тогда ждет?
Пока не будет загружена ваша страница пользователь всё равно ничего не увидит.

[Сергей ZSA]

Сергей: ежу понятно, но снова .css грузить то не нужно если переходит чел на внутренние страницы

[Сергей delphinpro]

Сергей ZSA: Вы не поняли. Если CSS внедряется в тело страницы, то его в любом случае нужно внедрять, а значит и передавать.

Либо я вас не понял...

[Сергей ZSA]

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

[Сергей delphinpro]

Сергей ZSA: Тогда что это означает:
>> Не просто подключаю его как отдельный файл, а содержимое этого min выношу в < style > < / style >.

[Сергей ZSA]

Сергей: это не я писал))

[Сергей delphinpro]

Сергей ZSA: Значит я не к вам обращался %) сорри.
Вопрос был к автору вопроса.

Answer 3

[entermix]

На всех страницах практически нету одинаковых элементов

Тогда может и стили (файлы стилей) для страниц разные сделать и подгружать по ситуации?

Comments

[Артём Цымбалюк]

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

[Сергей]

Артём Цымбалюк: Нормально посмотрит. Сделайте один общий файл с тем что повторяется и для каждой страницы еще свой. Добавьте еще минифицированый общий для всех, тогда интегратор сам выберет что лучше

[entermix]

Артём Цымбалюк: ну тут смотря какая CMS, хотя во всяком случае, что ему помешает соединить все в 1 файл? Главное, чтобы конфликтов стилей не было :)

Answer 4

[xmoonlight]

Всегда 2 файла:
1. Critical CSS (один для всех страниц, минимизируем и вставляем in-line'ом)
2. Additional CSS (универсальный для каждой страницы, не только типа страницы!, вставляем перед закрывающим тэгом BODY)

Critical CSS - содержит настройку шрифтов и стилей для основных тэгов.
Additional CSS - объединённые стили всех дополнительных элементов на странице.
Additional CSS - формируется шаблонизатором и объединяется+минимизируется+кэшируется на стороне сервера.
Также, нужно не забыть прописать в заголовках сервера время кэширования для браузера.

Answer 5

[Максим]

Верстать интересно на конструкторе https://mobirise.com на нем же можно и мелко-"многостраничники" как ваш.
Но конструктор-конструктором, все равно придется вставлять ручками некоторые объекты. однако основная более 99% элементов уже описаны в CSS.
Тут уже может встать проблема с хостером (не всякий хостер шутрый), поэтому можно часть элементов "стибрить" с шары https://cdnjs.com/ - поищите, часть элементов сайта уже есть, например https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1....
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js...
Лучше грузить их с указанных адресов.