Проблемы с css combiner?

Я работаю с пользовательскими рамками.

Когда я разрабатываю свои сайты, я делю правила CSS на несколько файлов, например

  • typography.css
  • links.css
  • master.css
  • tables.css
  • так далее

Теперь очевидная проблема заключается в том, что это означает несколько http-запросов.

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

echo load::css('name');  
echo load::css('another');

который выплюнет

<link rel="stylesheet" type="text/css" href="http://site.com/name.css">
<link rel="stylesheet" type="text/css" href="http://site.com/another.css">

Теперь я думаю о том, чтобы звонить

load::css('name');
echo load::css('another');

как вы можете видеть, я вызываю эхо только на последнем, это выведет

<link rel="stylesheet" type="text/css" href="http://site.com/combined/0df4899f90fe7be26f4893b1a4a30eb6.css">

0df4899f90fe7be26f4893b1a4a30eb6 == 'назови другого'

В общем,

когда ты звонишь load:css('something') он будет хранить имя в массиве, он вернет тег ссылки со значением md5(implode(' ', $cssArray)) в конце обработки скриптов php он фактически создаст объединенный файл с именем md5'd (если он не существует).

Это означает, что только один запрос сделан к серверу для всего содержимого CSS.

Кто-нибудь может увидеть какие-либо потенциальные проблемы с этим подходом?
Я также планирую реализовать это для файлов JavaScript.
Могли бы я столкнуться с какими-либо проблемами, если бы мне пришлось также использовать компрессор css/js?


Google Minify?
После некоторых исследований я наткнулся на Google Minify.

Можно ли изменить это так, чтобы вы могли просто дать ему массив путей к css-файлам и заставить его выплевывать содержимое, чтобы я мог вызвать что-то вроде

$css = minify::css($cssArray) Затем делать то, что я хочу с минимизированным содержанием?

Одна из полезных вещей, которые я увидел, - способность переписывать пути?

1 ответ

Решение

Ну, это может зависеть от того, как вы комбинируете таблицы стилей. Я не уверен, как ваш фреймворк объединяет CSS-файлы (по имени, по папке или вручную), но браузеры (я не знаю о IE) интерпретируют каждую строку буквально, даже если она избыточна:

#foo
{
  color: red;
  color: green;
  color: blue; /* This one will be the actual color of #foo */
}

Все они выполняются, поэтому последний, который нужно интерпретировать, это тот, который представлен. Если вы переопределите стили в разных таблицах стилей (я обычно использую globals.css, header.css, а также body.css), последний из них вступит в силу, что может сделать ваш сайт в стиле фанк.

Я думаю, что та же самая концепция применима к JavaScript, но я еще не встречал переопределения функций.

Другие вопросы по тегам