Xpoint
   [напомнить пароль]

Есть ли программный оптимизатор CSS?

Метки: [без меток]
2006-01-13 16:37:07 [обр] Алексей Фёдоров(0/3)[досье]

Скажите, пожалуйста, существует ли какой-нибудь программный оптимизатор кода CSS? Под оптимизацией я понимаю объединение идентичных параметров селекторов (если это стоит того, т.е. размер кода уменьшается). Наподобие следующего:

Было:

h1 {
   color: #f00;
}

p {
   color: #f00;
}

А стало:

h1, p {
   color: #f00;
}

Я пользуюсь TopStyle Pro 3, в принципе всем доволен, т.к. многие вещи автоматизированы, что сильно экономит время. Но когда напишешь готовый безглючный код, начинается его долгая оптимизация, характеризующаяся тупым лазаньем по коду с поиском соответствий и перенесением кусков кода посредством буфера обмена. Поскольку стиль обычно выдерживается в «едином стиле» (прошу прощения за тавтологию), сходных параметров у разных элементов бывает очень много. Причем такая оптимизация не всегда очевидна, ведь в ряде случаев объединение может привести к увеличению конечного кода.

Сначала хотел сам написать такую штуку, т.к. вроде всё ограничивается простейшим лингвистическим анализом и перебором по конечному размеру, но потом решил спросить – может сие уже есть давно?

Заранее благодарю за информацию.

спустя 4 минуты [обр] Алексей В. Иванов(16/2861)[досье]
М Перенесено из форума "Интернет::HTML-верстка::CSS"
спустя 38 минут [обр] Алексей Севрюков(6/1280)[досье]

Алексей Фёдоров[досье] Такая оптимизация хорошо до тех пор пока Вы вдруг не захотите поставить для P другой цвет. В этом случае Вы пожалете что оптимизатор все объеденил и Вам придется руками разделять стили, потому что код после такой оптимизации станет скорее всего очень плохо читаемым.

Опять же если Вы все делаете "для себя" не забывайте о том, что кто-то после Вас возможно будет читать этот код и вносить в него правки.

ИМХО.

спустя 52 минуты [обр] Юрий Ковшов(0/42)[досье]

Согласен. И мне код

h1 {
   color: #f00;
}

p {
   color: #f00;
}

совсем не кажется неоптимизированным. Любой так напишет, чтобы потом в будущем добавить новое свойство.
"Оптимизация" кода CSS сугубо личное дело каждого кодера.
also IMHO

спустя 43 минуты [обр] Алексей Фёдоров(0/3)[досье]

Я предполагал, что появятся не конкретная информация, а советы и мнения об удобстве описания стилей, но заранее не сказал что не надо об этом...

Во-первых, все советы об удобстве и предложения «думать о том хорошем парне из неизвестного будущего, которому придётся перелопачивать наш код и тихо материться» я понимаю и имею ввиду. Но речь идёт о моих личных проектах, а так же о тех малочисленных проектах, где преемственность кода между разработчиками не важна.

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

Тем не менее, спасибо за заботу, но обратной стороне медали такого удобства я знаю.

И всё же, существуют ли такие программки?

спустя 4 минуты [обр] Алексей Фёдоров(0/3)[досье]
P.S. И вообще, я считаю, глупо не пользоваться специально задуманной возможностью в разы уменьшать размер кода, там где размер имеет значение, а преемственность вообще не к месту.
спустя 20 минут [обр] Алексей Севрюков(6/1280)[досье]

Алексей Фёдоров[досье] Хорошо, вопросы "зачем" оставим. Но все же посмотрите исходники CSS этого сайта. Xpoint - концепт почти на все 100% (а может и не почти).

И не забывайте о кэшировании, при котором сжимать CSS не имеет особого смысла. А еще есть GZIP.


Замолкаю, т.к. как программ таких не видел и ни разу о них не слышал.

спустя 44 минуты [обр] Алексей Фёдоров(0/3)[досье]
Прошу прощения за оффтоп, а как GZIP может помочь с размерами CSS? Можно подробнее?
спустя 2 минуты [обр] Юрий Ковшов(0/42)[досье]
Я тоже не видел. И не видел, чтобы кто-то что-то подобное использовал, включая известные конторы... Мне кажется, если серф на поисковиках ничего не дает (у меня не дал), то можно ответить — "нет"
спустя 2 часа 22 минуты [обр] Алексей Фёдоров(0/3)[досье]
Что ж, будем писать... :) Спасибо.
спустя 2 часа 41 минуту [обр] Миша Спларов(0/34)[досье]
спустя 39 минут [обр] Алексей Севрюков(6/1280)[досье]

Алексей Фёдоров[досье]

а как GZIP может помочь с размерами CSS? Можно подробнее?

Ставим например mod_deflate или mod_gzip на Apache и будет упаковка на лету, прием клиентом запакованных данных и распаковка на машине клиента. Экономия трафика и ускорение загрузки.

Кстати, какой у Вас размер файла что Вы собрались его уменьшать?

спустя 11 часов [обр] Даниэль Алиевский(0/125)[досье]
Более того, используемый gzip-ом алгоритм сжатия LZ оптимизирует как раз повторения. Если вы замените 10 вхождений длинной цепочки символов на 1 вхождение, то после обработки gzip-ом разница будет весьма несущественна.
спустя 4 часа 9 минут [обр] Денис Ибаев aka Dionys(-1/57)[досье]
спустя 29 минут [обр] Денис Ибаев aka Dionys(-1/57)[досье]
пожалуй я ошибся, это не совсем то, совсем не то…
спустя 3 часа 35 минут [обр] Алексей Фёдоров(0/3)[досье]

Миша Спларов[досье]
Спасибо огромное! Сейчас буду смотреть...

Алексей Севрюков[досье]
Простите за невежество... первый раз просто слышу о возможности архивации стилей GZIP'ом. Как будет осуществляться распаковка на машине пользователя? Я так понимаю, любой браузер должен уметь делать это. Неужели любой браузер умеет делать это?

Денис Ибаев aka Dionys[досье]
Всё равно спасибо. :)

спустя 1 час 20 минут [обр] Даниэль Алиевский(0/125)[досье]

Алексей Фёдоров[досье]

Простите за невежество... первый раз просто слышу о возможности архивации стилей GZIP'ом.

А почему нет? Это просто стандартный вариант Content-Encoding, понимаемый практически всеми начиная с MSIE 4.0 и Netscape 4.04 (правда, тот еще не поддерживал упаковку JavaScript). Наверно, можно найти броузеры, которые не поддерживают распаковку gzip для стилей, но у них 0.00...1 процента пользователей. Кстати, мэтры, не подскажете, какие это броузеры? Подозреваю Netscape 4.0X, пока не проверил.

спустя 1 день 22 часа [обр] Миша Спларов(0/34)[досье]
Даниэль Алиевский[досье], какие именно браузеры не поддерживают - не в курсе, но все те, что поддерживают посылают заголовок Accept-Encoding, который мы, перед архивированием, будем проверять.
спустя 17 дней [обр] wiktar(0/20)[досье]

Да. Принявшись за активную работу с CSS, увидел его недостатки.

В нём нет переменных.

Вот и всё. Т.е. общее свойство нельзя назначить сразу нескольким элементам, вместо этого нужно назначить несколько элементов для одного свойства.

Вот из этого всё и вытекает. Если же делать так:

p { color: white; }
b { color: white; }

То при желании сменить всем цвет с белого на другой - придётся искать все white.

Идеальный вариант: написать программу, которая раскладывает все элементы и свойства так, как хочешь ты. Хочешь - максимум читабельности (для редактирования), хочешь - минимум размера (для выкладывания в вебе).

Может быть вообще сделать программу, где можно задать переменные ? Как-то цвета, кегли, размера, границы, и в css-файл просто подставлять их. А потом нажать "compile css!" и всё подставится так, как нужно?

Эх, мечты, мечты...

спустя 9 часов [обр] Юрий Ковшов(0/42)[досье]
Вот и всё. Т.е. общее свойство нельзя назначить сразу нескольким элементам, вместо этого нужно назначить несколько элементов для одного свойства.

А так, уже неинтересно?

p,b,i,u {color:#000}
* {font-family:tahoma}

Я не понимаю зачем это нужно :) Это же не язык программирования.. это всего лишь "каскадные таблицы стилей" :)
Лучший редактор CSS — руки+голова кодера :)

спустя 2 часа 34 минуты [обр] wiktar(0/20)[досье]

Юрий Ковшов[досье], так и приходится :)

Гораздо лучше бы это выглядело, если бы...

$mycolor = #00FF00

p { color: $mycolor; }
b { color: $mycolor; }
i { color: $mycolor; }
u { color: $mycolor; }

В таком случае, чтобы сменить все цвета на с #00FF00 на #FF0000, нужно изменить всего одну строчку. Чтобы изменить цвет только у b нужно точно так же изменить всего одну строчку - установить ей нужный цвет.

В обычном же случае, нужно вынуть b из p,b,i,u {color:#000}, затем добавить отдельное описание для b...

И это самый простой случай. А если элементы вложены друг в друга...

спустя 1 час 18 минут [обр] Lynn «Кофеман»(6/571)[досье]
Что вам мешает генерить CSS динамически на PHP/Perl/чём-угодно?
спустя 1 день 8 часов [обр] wiktar(0/20)[досье]

Lynn «Кофеман»[досье], это конечно выход. Но всё-равно нужно писать собственные функции для работы с этим.

Впрочем, просто :)

$css['body']['color'] = '#FFFFFF';
$css['body']['font-family'] = '#FFFFFF';

Но как быть со вложенными элементами?)

Да и тут проще руками писать.

спустя 1 месяц 10 дней [обр] Алексей Фёдоров(0/3)[досье]

wiktar[досье]
Да! Именно отсутствие переменных в CSS остро ставит вопрос удобства редактирования больших и сложных файлов. Тогда можно было бы легко оптимизировать код не боясь мыслей "а как же я это потом менять буду, если что?". Жаль но вроде даже в CSS 3 нет возможности использовать переменные (или, правильнее было бы назвать, константы), по крайней мере я никакой информации об этом не нашел.

Юрий Ковшов[досье]
"руки+голова кодера" не только лучший редактор CSS, но и вообще поможет в любом деле. :) Но есть такие понятия в жизни, как унификация процесса, повышение удобства и пр., дающие выигрышь во времени и качестве. Доказано, что простая подсветка кода ускоряет процесс программирования в 20-30%, не говоря уже о такой "очевидной" идее как переменные в CSS. :) Впрочем всегда есть люди использующие то что есть, и есть бунтари не вписывающиеся в общепринятые рамки, но это уже скорее философия. :)

Powered by POEM™ Engine Copyright © 2002-2005