Есть ли оптимизатор CSS, который обнаружит идентичные отдельные свойства в селекторах и сгруппирует их вместе? - PullRequest
Новая
       13

Есть ли оптимизатор CSS, который обнаружит идентичные отдельные свойства в селекторах и сгруппирует их вместе?

4 голосов
/ 25 февраля 2010

Вот пример того, что я ожидал:

Ввод: 

a {
    background: red;    
}

p {
    background: red;    
}

strong {
    background: red;
    color: green;
}

Выход: 

strong{color:green;}
a,p,strong{background:red;}

Большинство оптимизаторов будут выводить что-то вроде этого: 

strong{background:red;color:green;}
a,p{background:red;}

Обратите внимание, что он не обнаружил тот факт, что strong, хотя он содержит color: green;, также содержит background: red;, таким образом, он может быть сгруппирован с другими?

Любая помощь, которую вы можете оказать, будет принята с благодарностью

Всего наилучшего

Иэн

Ответы [ 2 ]

2 голосов
/ 25 февраля 2010

Может быть CSSTidy может помочь, здесь.

Если вы посмотрите на этот CSS "до" , вы увидите эту часть кода: 

a:hover{
    color: #DD6900;
}

a.admin:hover,a.mod:hover{
    color: #DD6900;
}

В CSS "после " вы получите: 

a:hover,a.admin:hover,a.mod:hover,a.topictitle:hover {
color:#DD6900
}

Не уверен, что это будет иметь дело со всеми возможными случаями - но в некоторых ситуациях кажется, что он делает то, что вы просите; -)

0 голосов
/ 26 февраля 2010

Хорошо, похоже, что того, кем я был после, либо не существует, либо его очень трудно найти, поэтому я написал сценарий, который решает мою конкретную проблему. Я вставляю это здесь в надежде, что кто-нибудь когда-нибудь найдет это полезным. 

<?php

$css = file_get_contents('test.css');

//Strip comments and whitespace. Tabs to spaces
$css = preg_replace("/\s{2,}/e", ' ', $css);
$css = preg_replace("/\/\*.*?\*\//", '', $css);
$css = str_replace("\t", " ", $css);
$css = str_replace(": ", ":", $css);
$css = str_replace(" }", "}", $css);
$css = str_replace("{", "{", $css);
$css = str_replace(";}", "}", $css);

//Break each rule out onto a new line
$css = preg_replace("/}\s*/", "}\r\n", $css);

//Break @ rules out onto new lines
$css = preg_replace('/(@.*?;\s*)/', '\0'."\r\n", $css);


//Parse CSS Rules
$parsed = array();
$css = explode("\r\n", $css);
foreach($css as $line => $rule){
    if (preg_match('/(.*?)\{(.*?)\}/i', $rule, $regs)) {
        $clean_selectors =  preg_replace('/\s*,\s*/', ',', $regs[1]);
        $clean_selectors =  preg_replace('/,\s*$|\s$/', '', $clean_selectors);
        $parsed[$line]['selectors'] = explode(',', $clean_selectors);
        $parsed[$line]['properties'] = explode(';', $regs[2]);
    } elseif(trim($rule) != '') {
        $parsed[$line] = $rule;
    }   
}

//Group CSS by property
$groups =  array();
foreach($parsed as $line => $css){
    if(is_array($css)){
        foreach($css['properties'] as $pline => $property){
            if(isset($groups[$property])){
                $groups[$property] = array_merge($groups[$property], $css['selectors']);
            } else {
                $groups[$property] = $css['selectors'];
            }

        }
    } else {
        $groups[$line] = $css;  
    }
}

//Output CSS sorted by property
foreach($groups as $property => $selectors){
    if(is_array($selectors)){
        asort($selectors);
        echo implode(",\r\n", $selectors)." {\r\n\t".trim($property).";\r\n}\r\n\r\n";
    } else {
        echo $selectors."\r\n\r\n"; 
    }
}

?>

Теперь пара кавает.

  1. Нет, это не самый красивый код в мире, он был сделан быстро, чтобы решить одну конкретную проблему, с которой я когда-то сталкивался, и он довольно сильно приспособлен к CSS, с которым мне поручено работать. Тем не менее, он должен быть достаточно универсальным, чтобы работать с большинством CSS, которые вы ему добавляете.

  2. Природа CSS заключается в том, что иногда порядок, в котором появляется правило, важен для визуализации окончательного документа. Вполне вероятно, что если вы просто запустите весь свой CSS через этот скрипт, ваша страница не будет отображаться так, как вы ожидаете. Я просто использую этот скрипт, чтобы сгруппировать специфичные для страницы CSS в веб-приложении, над которым у меня нет контроля над макетом. Поскольку каждое правило применяется к определенному элементу на конкретной странице, я не ожидаю, что когда я сгруппируюсь таким образом, будет много хитростей - это только сделает CSS более понятным.

...