Структура файла CSS
Есть ли лучшие практики или очень практичные решения для организации большого количества файлов CSS.
Во-первых, как вы должны использовать css на странице, если у вас есть внешняя таблица стилей для каждой отдельной страницы, и включаемый файл css для 'css reset' и всех общих элементов. Скажем, у вас есть включенный заголовок, как бы вы его стилизовали, у вас была бы другая внешняя таблица стилей.
Это просто добавляет к огромному количеству таблиц стилей, а затем, во-вторых, как их организовать, есть ли у вас папка для каждой внешней таблицы стилей для каждой страницы?
Наконец, существуют ли какие-либо стандартные соглашения о присвоении имен, например, если файл был включаемым, был бы он "filename.inc.css" или если бы он был для конкретной страницы, то это был бы "filename.pagename.css"
4 ответа
Я возражаю против предпосылки вопроса... несколько. Тот факт, что у вас так много CSS-файлов, говорит о ненужном раздутии. Вы, вероятно, связываете свои стили с конкретным контекстом, а не с классами контента. Посмотрите, что они делают в Yahoo, что я имею в виду.
Когда ваш CSS менее специфичен для контекста, он становится меньше. Это значительно уменьшает размер ваших файлов и уменьшает вашу проблему, излечивая болезнь, а не лечив симптом.
Поэтому потратьте время на то, чтобы переосмыслить свой CSS, чтобы убедиться, что он настолько большой, насколько это необходимо. Затем организуйте свой макет в соответствии с тем, что имеет для вас смысл. В конце концов, макет вашего CSS в несколько файлов для вашей выгоды только как разработчик. Файлы будут минимизированы и объединены в один файл для целей кэширования и производительности.
И CSS-файлы, которые с меньшей вероятностью изменятся, поскольку они были разработаны для максимальной неизменности, идеально подходят для кэширования.
Если у вас есть таблица стилей для каждой страницы, то каждая страница должна будет загрузить новый файл. Это определенно не хорошо. Вы хотите воспользоваться преимуществами кэширования (это относится ко всему в Интернете, а не только к css), поэтому было бы лучше иметь немного больше накладных расходов на большем файле css, который нужно всего лишь один раз загрузить для всего сайта. Однако это субъективный вопрос, поэтому могут быть и, возможно, бывают случаи, когда было бы лучше разделить их - возможно, если бы существовали две отдельные части сайта, для которых требовалось огромное количество CSS.
Как правило, наличие нескольких CSS-файлов предназначено только для разработки, и их следует объединять по соображениям производительности. Например, если бы у меня был menu.css, header.cssи т.д., они должны быть в одном файле при развертывании. Один пример, когда несколько CSS-файлов более приемлемы, - это когда они лениво загружаются системой плагинов, такой как системы управления контентом. Поскольку контент настолько динамичен, а плагины не тесно связаны с CMS, нет смысла объединять все CSS. Это сделало бы довольно сложным добавление и удаление плагинов.
Ой! В дополнение к объединению всех CSS, минификация также великолепна!
Существуют также такие библиотеки, как LESS и SASS, которые полезны для организации кода и сокращения объема записи.
Лучше всего иметь одну внешнюю таблицу стилей для всего сайта. Если вы можете попытаться назвать ваши классы и идентификаторы уникально, где они должны быть отделены друг от друга, чтобы не было путаницы между ними в вашем стиле. Таким образом, вы можете поддерживать весь сайт из одного файла.
Если вам абсолютно необходимо иметь разные таблицы стилей для каждой страницы, сохраните большинство стилей, которые вам понадобятся для рендеринга и загрузки, которые не относятся к конкретной странице и встречаются на всех страницах, в один основной файл CSS, а затем сохраните Остальные, которые относятся к минимуму страницы, сохранят вашу производительность выше и избавят вас от головной боли в будущем.
Чем меньше технического долга вы приобретаете, тем лучше.
Кроме того, если вам нужно несколько таблиц стилей, и для нескольких страниц вам потребуются стили, характерные для каждой страницы, я бы порекомендовал объединить и объединить ваши таблицы стилей, чтобы свести загрузки к минимуму и повысить производительность.
Проверьте http://smacss.com/
SMACSS (произносится как "привкус") - это больше руководство по стилю, чем жесткая структура. ... SMACSS - это способ проверить ваш процесс проектирования и способ приспособить эти жесткие рамки к гибкому мыслительному процессу. Это попытка документировать последовательный подход к разработке сайта при использовании CSS.
Мой совет всегда использовать препроцессор, это облегчает модульность. И используйте SMACSS, потому что это лучший способ сделать CSS, особенно при работе с большими стилями. Проверьте репозиторий начальной загрузки для примера https://github.com/twbs/bootstrap/tree/master/less