CSSO
Ребята из симферопольского «Яндекса» сказали новое слово в оптимизации CSS — CSSO. Оптимизатор интересен тем, что умеет минимизировать с изменением структуры — то есть удалять перекрываемые свойства, производить слияние блоков с одинаковыми селекторами и тому подобное.
Сергей Крыжановский, который занимается программированием CSSO, в своём блоге хорошо описал отличия CSSO от YUI Compressor, CSSTidy и им подобных.
Например, CSSO умеет вот такое:
/* до CSSO */
.a {
color: red;
border: 0;
}
.b {
color: red;
}
/* после CSSO */
.a{border:0}.a,.b{color:red}Меня несказанно печалит, что оптимизатор написан на JavaScript, потому что хостинг с серверным JS найти крайне проблематично, но зато оптимизацию в действии можно попробовать прямо в браузере.
Комментарии 42
http://code.google.com/speed/page-speed/do … SSelectors
Или браузеры при парсинге CSS догадываются объединять эти две группы правил для .a в одну?
Честно сказать, не представляю как может быть иначе.
1. Парсеры браузеров тратят на разбор CSS миллисекунды, это копейки в сравнении со всем остальным. Плюсминус копейка — даже толком не измерить, т.к. войдёт в погрешность.
2. Результат разбора уходит во внутренние структуры, которые гораздо, гораздо сложнее того, как выглядит текст CSS. В одном браузере группы объединятся, в другом размножатся (утрирую, но). Внутри свои алгоритмы и свои правила, пытаться учитывать их смысла нет.
Комментарий для skryzhanovsky:
Да, я смотрел, код правда простой.
какой-нибудь простой интерпретатор инструкций (DSL), тогда инструкции можно было бы обновлять сразу на всех языках.
Кстати, если ты сразу смотрел на другие языки, тогда можно было написать
Комментарий для skryzhanovsky:
Можно использовать «skryzhanovsky.ya.ru» вместо имени, тогда сразу по OpenID будет.
А у меня заработал OpenID на твоем блоге.
Не работал раньше?
А разверни мысль про DSL, а то я сейчас нафантазировал вплоть до первичной компиляции CSS в
Не, я не про это. Придумать язык, на котором можно было бы выражать конструкции оптимизации.Что-то в сторону БНФ, плюс некий язык для правил изменения кода.
Да, я тебе по этому поводу писал. А тут, смотрю сегодня — заработал.
А часто повторяемость намеренно добавляется для удобочитаемости. И я бы её просто оставлял в покое, не выкусывал — процент в хорошем коде совсем невелик и погоды не сделает. Но это умозрительное имхо, конечно. Надо просто попробовать на «хорошем» коде )) Может,
Но однозначно тулза пригодится для «плохого»/чужого кода. Иногда с первого взгляда видно — каша! покоцать её не глядя.
Удобочитаемость — результат минимизации не предназначен для чтения человеком. Это сродни компиляции.
А, понятно. Я зачатки такого уже сделал, правда, пока лишь в запретительных целях («не удаляй свойство», «не меняй порядок»). Посмотрим, будет ли удобно и в каком виде такой
Комментарий для skryzhanovsky.ya.ru:
Вы тоже? Не верю. Любой _нормальный_ кодер, которому к тому же не капают на мозги и не гонят на скорость, всё же стремится написать стройный код.
Нну.. вот и плохо, что так пишут. Разгребать такой код весьма противно. Я не хотел бы оставлять за собой такую пакость.
Комментарий для skryzhanovsky.ya.ru:
Комментарий дляboltai-shaltai:
Кажется, упускаете два распространённых случая:каким-нибудь не очень чисто работающим роботом — то ещё удовольствие.
1. Генерация CSS. Каждый раз руками допиливать за
2. Собираемый CSS. Как ни старайся, а при склейке сотни блоков окажется избыточность. Каждый раз после сборки её устранять — тоже серьёзная трата времени.
Повторю: CSS в 50..70Kb. :) Разработчик может быть сколь угодно гениальным, но удержать в голове контекст такого объёма и постоянно в голове же оптимизировать… Ну, возможно, да. На это будет уходить половина рабочего времени.
Теперь понятнее. :) Такой вариант рассматривал, но отклонил. Я хочу позже написать немножко записей о минимизации, там же опишу причины, по которым CSSO на JS и сделан так, как сделан. Сейчас бегло получится, потому плохо. Но поверь, причины решений есть. :)
Комментарий для skryzhanovsky.ya.ru:
Про генерируемый код согласен.
Про собираемый — не совсем понятно. Собираются же фрагменты, описывающие независимые элементы? Откуда там повторы, если классы разные?
Под «хорошим» кодом я имел в виду такой, который как раз не надо держать в голове целиком. Те же «независимые блоки» вполне снимают головную боль, ограничивая контекст.
Классы разные, свойства и значения свойств одинаковые. Упростим до немного детского примера: .myclass0 { color: red } .myclass1 { color: red }.
В худшем случае после сборки итогового CSS из запчастей мы получим простыню из такого перечисления классов.
Думается, работу по превращению такой простыни в .myclass0,.myclass1 { color: red } лучше переложить на плечи роботов.
Нда, я тут проклинил и говорил больше о тупом копипастерстве, о явной избыточности. А такая группировка как самоцель
А она что, реально экономит объём? Селекторы с именами классов и иерархией бывают довольно объёмные, и их «размножение» при группировке по свойствам может раздуть объём. Я понимаю, что вы там всё взвешиваете, на то и оптимизация. Но на
Очень зависит от того, какой CSS подаётся на вход. Тут как с архивированием: сжимать сжатое уже никак.
На больших грязных CSS выигрываем от 2% до 5% без особой магии. На мелких обычно меньше. Правда, следует учитывать, что пока не все варианты группировок добавлены, а shorthand'ы покрыты только margin/padding, потому можно оптимистично добавить ещё 1%..2%.
VPS легко найти, кроме того, сжимать можно и на локальной машине.
Это другие деньги.
Очень неудобно. Я часто редактирую мелочи прямо на удалённой машине.
Решил проверить на своем сайте.
До оптимизации: 1884 байта
После оптимизации: 1543 байта.
Получилась экономия в 341 байт.
Если бы там использовалась оптимизация по
Комментарий для orcinus.ru:
А попробуйте прогнать через YUI Compressor, потом через CSSO.
Добавил сегодня одну из схем группировок, теперь ваш CSS сжимается до 1308 байт. :)
На всякий случай отмечу: это не схема именно по
Смотри, я нашёл как улучшить алгоритм:
.a {
.b { color: red }
.c {
CSSO объединяет классы «.a» и «.b», что неправильно, там общее место — «color: red», оно короче, чем
Более того, должно получиться вот так:
.a, .c {
.b, .a { color: red }
Такую минимизацию уже проходил в ветке 1.0.x, после чего срочно переделал на менее опасную. :) В общем случае (обрати внимание на «в общем случае») нельзя нарушать порядок следования селекторов, это может плохо закончиться при комбинации классов у элемента. В твоём примере из abc получился acba, что может сломать вёрстку.
PS. Добавил бы подчёркивание в разметку комментов. :)
Комментарий для skryzhanovsky.ya.ru:
Видимо, на ночь глядя, я не очень понимаю в чём опасность. Поясни на примере, пожалуйста!
Ну уж нет. Подчёркивание должно быть только в ссылках. :)
Пожалуй, самый наглядный пример:
test0.css: .t0 { color: red } .t1 { color: green }
test1.css: .t1 { color: green } .t0 { color: red }
test.html: test
В случае с test0.css получишь текст зелёного цвета, а test1.css даст красный цвет.
Пример кажется простым и очевидным. И кажется, что «ну хорошо, в таких случаях не менять порядок, конечно, но наверняка иногда можно», но кажется так ошибочно. Распространи проблему на большой CSS, на сотни селекторов и тысячи свойств, да ещё и на множественные комбинации классов у элемента. Попытка безопасно перетрясти такое выливается в адову лапшу «частных случаев» с постоянной опасностью упустить
Может быть, в будущем снова залезу и
Не вижу как это пересекается с моим примером. Можешь показать как с моим примером может получиться
Жень, ведь специально выделил «в общем случае» и «может», а потом упомянул «частные случаи». В твоём примере ничего плохого. :)
На деле я просто не готов сейчас написать обстоятельно и убедительно на эту тему. Более того, вполне вероятно, что дую на воду после молока, и преувеличиваю опасности. Предлагаю вернуться к разговору после того, как CSSO исчерпает минимизации без смены селекторов, а я для этой области минимизаций составлю каталог.
Ok!
Отлично смотрится. Удачных поисков в оптимизации.
Для YUI Compressor`а, например, есть (описан, например, на «Техногрете»: http://www.artlebedev.ru/tools/technogrett …
А так — всё выглядит очень здорово! Спасибо Вашей конторе за такой замечательный проект!
Так что ждём, надеемся и верим! :)
Спасибо.
Сергей, еще момент.
Пробел перед !important.
Ясно. А если через Rhino прогнать?