2012-05-29 2 views
5

Я начинаю вытаскивать независимые фрагменты HTML в свои собственные файлы и включать их с помощью ключевого слова PHP include.HTML/CSS-модули - лучшая практика?

У меня есть файл CSS длиной около 1500 строк. «Я рассматриваю возможность размещения встроенного CSS с соответствующими HTML-файлами.

Конечно, оставляя компоненты, которые используются в разных блоках HTML.

Таким образом, у меня есть модульные блоки HTML/CSS, что я просто включить на сервере с помощью PHP include

Является ли это лучшая практика? Да/Нет, почему

+0

Что вы надеетесь получить этим? – steveax

+0

Легче поддерживать CSS/HTML –

+0

BC мое приложение маленькое У меня есть все мои модули в одном файле ... который я фактически объединяю с изображениями Base64, а JavaScript ... концептуально все это раздельно ... но когда я его отправляю , Я отправляю его в компе, чтобы ограничить HTTP-запросы ...также он кэшируется на клиенте ... кеш-кластер. –

ответ

3

Браузеры кэшируют файлы CSS ... из-за этого загрузка одного большого файла CSS не имеет большого значения.

Если вы хотите сделать его супер эффективным, вы можете разделить css на свои разные модули. Затем создайте «систему сборки», которая проверяет, какие модули используются, и создает один файл CSS (даже минимальный) с помощью только необходимого CSS.

+0

Javascript - jQuery делает что-то вроде этого .... если только я был 5 человек, а не 1 :) –

1

Я бы не вставлял ваш CSS в HTML-файл напрямую, но имел внешнюю таблицу стилей для каждого файла. Точно так же вы должны держать JS отдельно от своего HTML, это также сохраняет ваш CSS. Затем все, что вам нужно сделать, чтобы включить ваш CSS, -

<link rel="stylesheet" href="path/to/style.css"> 

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


Однако, если вы include() ИНГ скажем, 15 файлов на вашей странице, вы не хотите, чтобы сделать 15 запросов для CSS файлов. В этом случае вы должны сгруппировать их в более крупные файлы, чтобы уменьшить количество требуемых запросов.

+0

Если у него 20 "модулей", то это 20 отдельных подключений, которые необходимо выполнить. Не очень эффективно. – Galen

+0

Это может вызвать несколько запросов для внешних файлов CSS. Как правило, следует стараться сохранить это ограничение, если это возможно. – kevin628

+0

Мое понимание вопроса состояло в том, что OP будет использовать пару файлов HTML/CSS для отдельных _pages_, а не отдельных модулей. – Bojangles

1

Есть несколько вещей, чтобы рассмотреть здесь, чтобы увидеть, что лучше для вас:

  • ли ваш сервер в настоящее время отправить в HTTP-архивированная версию CSS-файлов, чтобы сделать это как можно быстрее?
  • Вы минимизировали CSS, чтобы увидеть, насколько малы вы можете его получить (несколько инструментов там минифицируют файлы для вас, например, YUI Compressor)?
  • Отправка CSS в виде фрагментов означает, что файл не может быть кэширован браузером; проверьте, стоит ли это. Это зависит от ряда переменных, таких как средние страницы на посетителя (может помочь просмотр в Google Analytics или другое программное обеспечение статистики), размер кусков по сравнению с общим размером CSS и т. Д.
  • Возможно, минимальные затраты на вычисление сервера могут быть или не быть для обслуживания фрагментов с PHP в отличие от плоских файлов без PHP; проверьте, соответствует ли это вашей ситуации.
  • Вы обслуживаете медиа-зависимый CSS? Если это так, убедитесь, что куски обслуживаются только по мере необходимости (например, мобильному устройству могут потребоваться только мобильные фрагменты).
+0

хороший материал ... Я с гордостью кэширую свой статический контент, используя localStorage. –

Смежные вопросы