У меня есть движок шаблонов в PHP, который позволяет вам устанавливать атрибуты стиля для объектов перед рендерингом.
Во время разработки я хочу, чтобы эти атрибуты были встроенными, чтобы я мог их находить и легко изменять.Тем не менее, для производства, я хочу извлечь их и кэшировать их в файл CSS.Я также хочу извлечь встроенные стили из любого HTML-элемента в шаблоне.
Извлечение, а также упорядочение в части массивов сделано.Таким образом, у меня есть группа или массивы, которые структурированы следующим образом
array(
'tag' =>'div',
'id' =>'myDiv',
'class'=>array('container','wrapper'),
'style'=>array('background'=>'#CCCCCC',/*rules...*/)
);
Обратите внимание, что ключи 'id' и 'class' не обязательно установлены на всех элементах, но по крайней мере один из них всегда установлен.
Часть, которая отображает этот массив как файл css, также сделана.
Что мне нужно сделать, это перестановить часть массива 'style', чтобы общие элементы были сгруппированы вместе.Оптимизация не является проблемой, так как этот процесс будет вызываться только один раз, а затем кэшироваться.
Но я попытался создать псевдокод, и я просто застрял.Я предполагаю, что, по крайней мере, какая-то часть процесса должна будет делать «как можно более умные предположения», но даже этого я не вижу ясно.
Последним средством было бы просто создатьполная строка, затем пропустите саму строку через css-minifier, но, насколько я мог прочесть, никто не делает эту вещь "приведение к наименьшему общему знаменателю".
Любое предложение?
[править]
В ответе на комментарии вот еще уточнение:
если мой массив представлен так:
array(
array(
'tag' =>'div',
'id' =>'myDiv',
'style'=>array('background'=>'#CCCCCC','font-size'=>'24px','color'=>'#FF0000')
),
array(
'tag' =>'div',
'class'=>array('container','hasBorder'),
'style'=>array('background'=>'#CCCCCC','border'=>'1px solid black')
),
array(
'tag' =>'div',
'class'=>array('wrapper','hasBorder'),
'style'=>array('color'=>'#FF0000','border'=>'1px solid black')
)
);
MyCSS должен отображаться так:
#myDiv{font-size:24px;}
#myDiv, .container{background:#CCCCCC;}
#myDiv, .wrapper{color:#FF0000;}
.hasBorder{border:1px solid black}
Вывод может быть другим;Мне все равно, какова точная логика определения правил;Но чего я хочу избежать, так это того, что у меня сейчас есть:
#myDiv{background:#CCCCCC;font-size:24px;color:#FF0000;}
.container{background:#CCCCCC;border:1px solid black;}
.wrapper{color:#FF0000';border:1px solid black;}
Это простой пример, но у меня много повторяющихся правил, которые не имеют смысла;сгенерированный CSS не только раздут, он не гуманно обслуживаем.Я хочу создать базовый CSS, с которым дизайнеры смогут работать.