Как верстать страницы с уникальными стилями и анимацией?

Question

[sloupone]

Как принято верстать контентные страницы, на которых применяются уникальные стили и анимации (JS)?

Например, на artlebedev.ru почти на каждой странице работы в портфолио свой стиль: где-то другие шрифты, где-то анимированные элементы, не встречающиеся нигде больше на сайте, иногда затрагиваются общие элементы страниц (например, шапка на artlebedev.ru/theatre/benois/).

Как я понимаю, нужно для каждой страницы создавать свои дополнительные css и js файлы и отдавать их с сервера. Но как не столкнуться с конфликтами стилей? И какие вообще есть практики верстки в таких случаях? Как это выглядит на бэкенде?

Comments

[riot26]

На полный ответ это не тянет, поэтому в комментарии. Разобраться и не запутаться поможет БЭМ.

[sloupone]

riot26, причём здесь БЭМ? Вы не поняли вопрос.

[Модератор]

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

Answer 1

[Denis]

Сложно сказат тут все зависит от существующих инструментов, либо есть библиотеки облегчающие работу либо самому все контролировать.
Допустим если взять PHP и фреймверк Yii
То там существует такой механизм как Assets.
Asset специальный класс который содержит набор css и js, а так же блок завистмостей тем самым указать после какого Asseta нужно подключить этот.
Например yii автоматически подключает asset для подключения jquery и bootstrap. Можно написать MainAsset для всего сайта и указать подключить после Bootstrap, и для каждой уникальной страницы сделать свой asset который который будет дополнять и перегружать основной, и в зависимости указать подключать его после MainAsset, свои ассеты подключаются прямо в шаблоне представления.
Ну вот один из способов.

Answer 2

[Виталий]

И какие вообще есть практики верстки в таких случаях?

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

Как это выглядит на бэкенде?

что именно? в вопросе ничего про бэк нету , только фронт затрагивается

Comments

[sloupone]

Спасибо. Artlebedev здесь чисто для наглядности.
Про бэк имелось в виду, как и где хранить информацию о том, что грузить.

[Виталий]

sloupone, так в head же ж указывается какой скрипт / стиль грузить для конкретной страницы

[sloupone]

Виталий, я понимаю :) Я имел в виду, вот есть дополнительный css-файл для конкретной страницы, а как его хранить на бэке? Это же уже как бы не статика, и, наверное, нужно хранить это все в файловом хранилище, как картинки?

[Даниил Сугоняев]

sloupone, у вас что-то все перепутано. Вам нужно разобраться в отличиях front-end и back-end.
И стили и картинки хранятся одинаково на сервере, но они не относятся к back-end и подключаются одинаково к html или css документу.
Дополнительный файл стилей для страницы подключается также как и основной, вы можете подключить какое угодно количество файлов стилей к html документу, они не будут конфликтовать.

[Виталий]

sloupone, создали папку CSS в ней кучу файлов , можно в CSS создать для каждой страницы папку и в ней кучу CSS
Потом спустя пол года ужаснуться этому, выучить SASS и писать в нем, собирают в итоге в 1 файл

[sloupone]

Виталий, SCSS знаю. Дело в том, что мне не нужно в один файл. Представьте, есть 1000 контентных страниц, на каждой по 20 уникальных стилей, зачем мне это тащить в один общий файл?

[sloupone]

Даниил Сугоняев, вы не вникли в суть вопроса. Что такое бэк и фронт, я прекрасно понимаю.

[Даниил Сугоняев]

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

[sloupone]

Даниил Сугоняев, вопрос становится максимально понятен, если посмотреть пример. А ответ про бэк, собственно, помечен решением — кто-то вот понял.

[Виталий]

sloupone, если точка входа 1 - конкретная страница, тогда да . Если это человек переходит по 20 страницам, то выгодней ему 1 раз загрузить все , чем делать 20 запросов на сервер к файлам стилей.

[sloupone]

Виталий, логично, не подумал об этом. Спасибо.