Question

我正在创建一个供个人使用的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或通过PHP使用$ classes_by_items_normal来完成

感谢。

Answer 1

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

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

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

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

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

Answer 2

以下工作使用类似于$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;
  }

}

您可以尝试here。

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

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

CSS结合了类，清理代码/复制

2 个答案: