Php 我有一个css数组要合并_Php_Css_Optimization

Php 我有一个css数组要合并

php css optimization

Php 我有一个css数组要合并,php,css,optimization,Php,Css,Optimization,我有一个用于创建模板的HTML类。我的班级是这样工作的： <?php $page = \TEST\HTML::dispense(':html'); $page->mainWrapper(':div') //creates a child object by using __call() and sets the "div" model ->id('mainWrapper') //sets id ->style('background','red') //adds a s

我有一个用于创建模板的HTML类。我的班级是这样工作的：

<?php
$page = \TEST\HTML::dispense(':html');
$page->mainWrapper(':div') //creates a child object by using __call() and sets the "div" model
->id('mainWrapper') //sets id
->style('background','red') //adds a style
->text('blah') //adds a text
->addClass('someClass'); //adds a class
->someSpan(':span')
->addClass('spanClass')->addClass('someClass')
->style('font-size','12pt')
->style('border-bottom','1pt dashed black')
->style('background','red');
?>

如何删除多余的值，以便留下一个相关的css文件？缩小和压缩可以在稍后阶段进行。我现在想要的是在转储数组之前比较值并优化数组，以便将具有相同标记/id/class的所有元素共有的所有“样式键”分组在一起

因此，在上面的示例中，例如，由于两个元素（div和span）共享样式“background:red”和类“someClass”，因此我将使用带有“background:red”的“someClass”CSS规则

如果您感兴趣，下面是我的“extractstyles”函数：

<?php
public static function extractStyles($element, array &$styles=array()){
    if($element instanceof \TEST\HTML){$element = $element->htmlData();}
    $tag = isset($element['#acronym']) ? $element['#acronym'] : NULL;
    $id = isset($element['#id']) ? '#'.$element['#id'] : NULL;
    $classes = isset($element['#class']) ? $element['#class'] : NULL;
    if(isset($element['#style']) && ($tag || $id || $class)){
        $ref = &$styles;
        if($id){if(!isset($ref[$id])){$ref[$id] = array();};$ref = &$ref[$id];}
        if($classes){
            if(\is_array($classes)){$classes = '.'.implode('.',$classes);}
            if(!isset($ref[$classes])){$ref[$classes] = array();};$ref = &$ref[$classes];
        }
        if($tag){if(!isset($ref[$tag])){$ref[$tag] = array();};$ref = &$ref[$tag];}
        foreach($element[self::ATTRIBUTES]['#style'] as $style=>$value){
            $ref[$style] = $value;
        }
    }
    if(isset($element[self::CHILDREN]) && count($element[self::CHILDREN])){
        foreach($element[self::CHILDREN] as $child){
            self::extractStyles($child, $styles);
        }
    }
    return $styles;
}
?>

任何一个指针都是受欢迎的……我真的迷路了。我甚至不知道我所寻找的是否可行

如上所述，性能目前不是问题。如果它工作，我会找到一种方法来优化它。另外，请不要链接到xCSS和其他框架，因为它们处理字符串，而我的CSS是作为数组创建的。

提前谢谢你能给我的任何帮助

一阶优化是建立层次结构树。此树中的父子关系是父子关系，而子关系是父关系的超集。此树的根节点是空样式（您将不会显示该样式）

所以如果你有

.parent {
    background: red;
}

.childA {
    background: red;
    border: 1px solid black;
}

.childB {
    background: red;
    font-weight: 800;
}

#menu {
    background: red;
    border: 1px solid black;
    margin: 15px 40px;
    color: white;
}

父级设置为树中的最低公分母。然后可以用较少的文本将其压缩为3个类。子元素将拥有路径中的所有类，如果您最初拥有

，那么您将获得

压缩类如下所示：

.parent {
    background: red;
}

.childA {
    border: 1px solid black;
}

.childB {
    font-weight: 800;
}

关于IDs的注意事项，IDs将始终是最合适类的子类。所以如果你有

.parent {
    background: red;
}

.childA {
    background: red;
    border: 1px solid black;
}

.childB {
    background: red;
    font-weight: 800;
}

#menu {
    background: red;
    border: 1px solid black;
    margin: 15px 40px;
    color: white;
}

它将成为ChildA的孩子，其css将减少到

#menu {
    margin: 15px 40px;
    color: white;
}

并显示为

要创建树，您需要一个对象来存储相同子对象的数组（递归）和一个函数，当给定两个对象时，该函数可以确定它们的css是子集、相等还是超集、差异的数量，或者是否没有公共性

如果您不熟悉二进制搜索树，这将是一个很好的时间来研究它，即使这将比那更复杂，这将是一个正确方向的良好开端

二阶优化是确定子元素的嵌套是否可以进一步减少类的需要。例如，如果

中的所有
都采用了类似的样式，那么可以为\menu li
创建规则
为此，您需要转到每个节点，并分析其子节点。如果同一节点类型的所有子节点共享一个公共样式元素（使用上面的集合比较器），则提取该公共集合元素作为父节点。差异变成了孩子
假设您以此为例（注意，已通过第1步）：
到
html使类menuli

<ul id="menu" class="parent childA">
    <li class="top">Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li class="bottom">Item</li>
</ul>


项目
项目
项目
项目
项目


记住，在向下搜索节点树时使用广度优先搜索，而不是深度优先搜索。如果您具有攻击性，您可以在多条路径上不断检查第二级是否有类似的标记，普通的第二级搜索可能会显示#menu li a
或#container div p
等的类似类。如果允许无限深度搜索，这将成为NP难问题
希望这有帮助。如果这是您想要的方向，我很乐意为您提供更多关于集合比较器和可能的树搜索器的代码，尽管这要复杂得多。
“如何删除冗余值”您能提供一个示例吗？我有点困惑为什么要将类和样式应用于同一个对象。这是一个非常有趣的解决方案。然而，我想知道这是否有点违背了CSS的初衷，因为它引入了一种僵化的CSS-to-DOM结构关系。例如，您将如何处理：。父{color:pink}.child1{color:pink}.child2{color:yellow}？子1不需要粉色声明，因为它可以从.parent继承。但如果child1最终被放进了child2的容器中呢？然后它需要回颜色声明。我想这可以通过多次迭代来处理。你说得对。在普通css中，您可能希望保持.child1{color:pink；}的想法，但是，我认为问题是要从样式属性中提取最小的css。我认为每次html/样式发生变化时，您都必须再次生成css。是的，我相信是这样。这的确是一个有趣的难题。考虑到.css文件将被缓存（主要目标），它确实有所帮助。但这确实意味着CSS并不是独立于HTML的，所以是的，它似乎需要对HTML的每次更改进行“重新编译”。如果频繁更新，可能会抵消缓存.css的好处。我想这一切都取决于更新的性质。我认为没有足够的信息来构建适当的解决方案。但是是的。我同意这不是一个完美的解决方案……确实是一个非常有趣的解决方案。我根本没有想到这个方向@DA：我不关心如何独立于HTML维护CSS文件。我是web上最佳实践的狂热捍卫者，但过了一段时间，我发现保持css“解耦”并没有真正的好处；恰恰相反，如果您更改HTML中的任何内容，那么在一个大型站点上维护所有类和数千个ID是一件烦琐的事情@ohmusama：你觉得遗漏了什么信息？
#menu {
    margin: 15px 40px;
    color: white;
}

#menu li {
    font-size: 30px;
    font-weight: 800;
    margin: 8px 0;
}

<ul id="menu" class="parent childA">
    <li class="top">Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li class="bottom">Item</li>
</ul>