Ниже приводится выдержка из нашей книги CSS Master , написанной Тиффани Браун. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Организация файлов CSS
Частью хорошей архитектуры CSS является организация файлов. Монолитный файл подходит для индивидуальных разработчиков или для небольших проектов. Для больших проектов — сайтов с несколькими макетами и типами контента или с несколькими брендами под одним и тем же зонтиком дизайна — разумнее использовать модульный подход и разделить ваш CSS на несколько файлов.
Разделение вашего CSS по файлам облегчает распределение задач между командами. Один разработчик может работать над стилями, связанными с типографикой, а другой может сосредоточиться на разработке компонентов сетки. Команды могут разумно разделить работу и повысить общую производительность.
Так как же может выглядеть хорошая файловая структура, которая разделяет CSS на файлы? Вот структура, аналогичная той, которую я использовал в недавних проектах:
- reset.css: стили сброса и нормализации; минимальные объявления цвета, границы или шрифта
- typography.css: шрифты, вес, высота линий, размеры и стили для заголовков и основного текста
- layouts.css: стили, которые управляют макетами страниц и сегментами, включая сетки
- forms.css: стили для элементов управления формы и меток
- lists.css: специфичные для списка стили
- tables.css: специфичные для таблицы стили
- carousel.css: стили, необходимые для компонентов карусели
- accordion.css: стили для аккордеонных компонентов
Если вы используете препроцессор, такой как Sass или Less, вы также можете включить файл _config.scss или _config.less, который содержит переменные цвета и тому подобное.
В этой структуре каждый файл CSS имеет специфическую и узкую область видимости. Сколько файлов вы в конечном итоге получите, зависит от того, сколько визуальных шаблонов или компонентов требуется для дизайна вашего сайта.
Фреймворки CSS, такие как Foundation и Bootstrap, используют этот подход. Оба становятся достаточно детальными с отдельными файлами для индикаторов выполнения, входов диапазона, кнопок закрытия и всплывающих подсказок. Это позволяет разработчикам включать в проект только те компоненты, которые им необходимы.
Примечание: библиотеки шаблонов
Тесно связанной концепцией разделения CSS между файлами, подобным этой, является библиотека шаблонов . Отличный учебник по этой теме — «Начало работы с библиотеками шаблонов» Анны Дебенхем .
Сколько файлов?
Несмотря на то, что мы используем несколько CSS-файлов для разработки, мы не собираемся предоставлять все их браузеру в этой форме. Количество HTTP-запросов, которые нам потребуются, заставит наш сайт загружаться за один раз. Вместо этого мы объединяем наши меньшие CSS-файлы в несколько больших для производства.
Конкатенация в этом контексте означает объединение нескольких файлов в одну полезную нагрузку CSS. Это устраняет необходимость в операторах @importlink Текущие браузеры имеют ограничения на количество файлов, которые они могут загрузить одновременно. Мы можем использовать конкатенацию, чтобы уменьшить количество сетевых запросов и быстрее доставить ваш контент пользователям.
Часто ваша инфраструктура веб-разработки будет обрабатывать конкатенацию как часть своих функций управления активами, таких как Ruby on Rails. Некоторые системы управления контентом делают то же самое, будь то базовая функция или дополнение. Препроцессоры, представленные в главе 9, также упрощают конкатенацию. Если ни препроцессоры, ни среды разработки не являются частью вашего рабочего процесса, есть вероятность, что в вашей операционной системе есть утилита конкатенации, которую вы можете использовать вместо нее.
Для Mac OS X или Linux объедините файлы с помощью утилиты cat
cat file1.css file2.css > combined-output-file.css
Используете Windows? Попробуйте утилиту type
type file1.css file2.css > combined-output-file.css
Вы также можете написать свой собственный сценарий конкатенации, используя Bash, PHP, Python или другой язык сценариев по вашему выбору.
Примечание: оптимизация CSS
Конкатенация является одним из аспектов оптимизации CSS. Столь же важно минимизировать ваши файлы, чтобы удалить лишние символы и пробелы. Инструменты минимизации описаны в главе 3.
Так сколько файлов вы должны использовать? Вот где это становится сложно. В настоящее время рекомендуется определять CSS критического пути — минимальное количество CSS, которое необходимо отобразить на вашей странице, — и встраивать его в свои страницы с помощью элемента style Дополнительные файлы CSS должны быть загружены с использованием JavaScript. Презентация Адди Османи «Инструменты для повышения производительности CSS» дает отличный обзор этой техники и некоторых инструментов, которые вы можете использовать для ее реализации. Также см. LoadCSS от Filament Group .
Если ваш контент будет обслуживаться с использованием протоколов SPDY или HTTP / 2, объединение может быть ненужным. С HTTP / 1.1 браузеры загружают ресурсы последовательно; следующий запрос начинается, когда заканчивается предыдущий. Согласно этой модели, уменьшение количества сетевых запросов улучшает производительность сайта; однако SPDY и HTTP / 2 могут загружать сразу несколько ресурсов. В результате, нет никакого реального преимущества в уменьшении количества запросов. Однако стоит отправить больше байтов, чем необходимо для отображения страницы. В «Учетных и компромиссных решениях HTTP / 2» Уильяма Чана это объясняется более подробно Наилучшим подходом было бы определить, обслуживает ли ваш сервер HTTP / 2, и, если это так, проверить, получит ли больше пользователей пользу от фактического разделения ваших ресурсов и загрузки только того, что нужно странице, или продолжения работы в старом путь. Если вы хотите узнать больше о методах оптимизации производительности, книга SitePoint Lean Websites является полезным ресурсом.