CSS组合类，干净的代码/重复

我正在创建一个供个人使用的CSS清理器，因为我拥有的文件超过400kb，并且大部分内容都是重复的。

我创建了一个脚本来读取和CSS文件并破坏类，并将样式保存在两个不同的数组中。 $css_normal 和 $classes_by_items_normal

$css_normal 的结果(只有几个项目用于解释(

Array
(
[header] => Array
(
[display] => block
)
[.half-law-first ul] => Array
(
[font-family] => 'Lato', sans-serif
)
[.half-law-first ul li a] => Array
(
[font-family] => 'Lato', sans-serif
)
[.half-law-second ul li a] => Array
(
[font-family] => 'Lato', sans-serif
)
[.half-law-second ul strong] => Array
(
[font-family] => 'Lato', sans-serif
)
[.title-blue] => Array
(
[font-family] => 'Lato', sans-serif
)
[.enquiry_box_home] => Array
(
[min-height] => 480px
)
[.will-step1-fbox-footer] => Array
(
[padding-top] => 2px
[padding-bottom] => 20px
[-webkit-border-bottom-left-radius] => 5px
[-webkit-border-bottom-right-radius] => 5px
[-moz-border-radius-bottomleft] => 5px
[-moz-border-radius-bottomright] => 5px
[border-bottom-left-radius] => 5px
[border-bottom-right-radius] => 5px
[font-family] => 'Lato', sans-serif !important
)
[.will-step1-fbox-footer .checkbox ] => Array
(
[border-bottom] => 1px dashed #fff
[padding-bottom] => 8px
[padding-top] => 2px
)
[.second_banner_x] => Array
(
)
[.custom_enquiry_box] => Array
(
[width] => 100%
[height] => auto
[margin] => 0px
[padding] => 18px
[background] => rgba(3, 3, 3, 0.3)
[color] => #fff
[position] => relative
[z-index] => 38
[margin-top] => 5px
[-webkit-border-radius] => 5px
[-moz-border-radius] => 5px
[border-radius] => 5px
[box-shadow] => 4px 5px 13px rgba(0, 0, 0, 0.5) !important
)
)

$classes_by_items_normal 的结果(用于解释的项目很少(

我想要的是组合具有相同样式的类喜欢：

header
{
display: block;
}
.half-law-first ul, .half-law-first ul li a, .half-law-second ul li a, .half-law-second ul strong, .title-blue
{
font-family: 'Lato', sans-serif;
}
.enquiry_box_home
{
min-height: 480px;
}
.will-step1-fbox-footer,
.will-step1-fbox-footer .checkbox 
{
padding-top: 2px;
}
.will-step1-fbox-footer
{
padding-bottom: 20px;
}
.will-step1-fbox-footer .checkbox
{
border-bottom: 1px dashed #fff;
padding-bottom: 8px;
}

请让我知道如何使用 $css_normal 或 $classes_by_items_normal 通过 PHP 完成它

谢谢。

循环 $classes_by_items_normal 以创建一个数组，其中键是所有类的串联，值是属性数组

这是一个未经测试的代码：

$newArr = []
forEach($classes_by_items_normal as $prop => $classes){
newArr[join(',',$classes)][] = $prop
}

只需循环$newArr即可创建字符串。

每次只有一个属性，而不是两个属性具有完全相同的类。

以下方法使用类似于$css_normal的形式工作，但不将属性拆分为键/值对，只需将它们保留为字符串：

$optimized = [];
foreach (array_keys($css) as $sel) {
// refetch value since it may have changed during previous iteration
$def = $css[$sel];
// find largest common subset
$subset = [];
foreach ($css as $s_sel => $s_def) {
if ($sel === $s_sel) continue;
$common = array_intersect($def, $s_def);
if (count($common) > count($subset)) {
$subset = $common;
}
}
if (empty($subset)) {
// unchanged
$optimized[$sel] = $def;
} else {
// selectors containing subset
$sel_concat = [];
// find & extract subset
foreach ($css as $s_sel => $s_def) {
$diff = array_diff($s_def, $subset);
if (count($s_def) - count($diff) === count($subset)) {
$sel_concat[] = $s_sel;
$css[$s_sel] = $diff;
}
}
// concatenate selectors for subset
$optimized[join(', ', $sel_concat)] = $subset;
}
}

你可以在这里尝试一下。

使用的方法是查找 CSS 属性的最大公共子集并将它们组合在一起。

像CSSO这样的工具对你有用，而不是在PHP中推出你自己的解决方案吗？

相关内容

最新更新

热门标签：