Организация файлов по отдельным css?

Question

[Alibek Kulseitov]

Верстаю огромный проект и почти на каждой странице есть схожие элементы. Есть пару страниц идущих как лендинги отдельные но опять же элементы есть схожие.
В чем собственно вопрос: Как вы считаете есть ли смысл например все стили navbar засунуть в nabars.css, все модалки в modals.css, все стили страницы профиля в profile.css итд ?? Для того чтобы в будущем было проще верстать другие страницы.

Если вы считаете что это правильно то второй вопрос:
Медиа запросы писать в каждом файле отдельно внизу или создать один общий файл responsive.css ?
Например для navbar(-ов) медиа запросы писать в navbars.css в самом внизу и тд.

Comments

[Сергей delphinpro]

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

[Сергей delphinpro]

В больших проектах имеет смысл дополнительно делать ui kit - несколько страниц со всеми элементами и базовыми блоками из которых собираются страницы. Здесь же приводить примеры использования. Что-то вроде документации к проекту. В качестве примера можете посмотреть доку к любому css фреймворку.

[Alibek Kulseitov]

Сергей: Да, проект очень большой. Никогда не имел дело с большими проектами. Где больше 70 страниц. Насчет ui-kit понял. Но стоит ли в этом ui kit показывать примеры скриптов? или только html+css компоненты

[Саша]

Сергей автор наверное имеет ввиду подключение css уже в прод версии

[Сергей delphinpro]

Саша: Это неважно. Я не зря упомянул, что собрать проект можно как захочется.

[Сергей delphinpro]

Алибек Кулсеитов: Это уже сами решайте, что там показывать.
Скажу лишь, что документация большому проекту необходима. Через полгода скажут сделать новый блок на сайте. Посмотришь в доке - возможно уже есть нужный или похожий.

Answer 1

[Саша]

Алибек Кулсеитов лучше всего подключать один css файл, лучше один запрос на сервер, чем несколько.
если в css очень много строк, например 5-10к, то тут уже стоит задуматься и разбить на несколько файлов:
- основные стили, которые используются на каждой странице
- стили которые используются на той или иной странице
но в таком случае надо тестировать на скорость рендеринга страницы, мол в каком случае он будет быстрее.
- первом, когда весь css в одном файле
- втором, когда разделен

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

Answer 2

[sergey]

Что мешает использовать препроцессор? Все же просто, берем правило 7 к 1 Архитектура и не изобретаем ничего нового, тем более в большом проекте это просто необходимо.

Comments

[Alibek Kulseitov]

Препроцессоры не знаю, но архитектура очень понравилась! спасибо годно

[Alibek Kulseitov]

SM А например если ложить в папку vendor файлы бусттрапа то туда же ложить .js и .css ? Или внутри папки vendor надо создавать css и js?

[sergey]

нет необходимы две таски, кторые создадут vendor.css и vendor.js

[Alibek Kulseitov]

SM еще вопрос. А если все компоненты будут раскиданы по папкам и файлам, что тогда будет в main.css?