Порядок оптимизации CSS

Главные вкладки

Аватар пользователя HIgor1968 HIgor1968 10 декабря 2008 в 16:02

Влад Савицкий поднял хорошую тему Профилирование CSS селекторов.
Попытаюсь разюмировать порядок оптимизации CSS:

  • Во первых приступая к созданию проекта для страницы администрирования лучше указать отдельную стандартную тему, чтобы дополнительно не оформлять страницы администрирования.
  • Исключаем загрузку system.css и по желанию defaults.css (этот файл небольшой) из стилей проекта
    для друпал5 : http://blamcast.net/articles/override-default-system-css-drupal
    для друпал6 : http://drupal.org/node/258756
    Прописываем в template.php вашей темы.
     function ВашаТема_preprocess_page(&$vars)
     {
     $css = $vars['css'];
     unset($css['all']['module']['modules/system/system.css']);
     unset($css['all']['module']['modules/system/defaults.css']);
     $vars['styles'] = drupal_get_css($css);
     }
     
  • Если тема давно сверстана то чтобы разобраться с селекторами которые брались из убранных css-файлов, то можно коментировать-раскоментировать последнюю строчку выше описанной функции, соответственно подключая-пряча убираемые CSS. Чтобы выяснить используемые селекторы для вставки в свой CSS

По завершении проекта в CSS все равно много дублей и селекторов которыми уже не пользуетесь.
Для дальнейшей оптимизации CSS Вам потребуется Firefox Dust-Me Selectors подробно описанный Владом
Для сжатия вашего CSS можете воспользаватся online оптимизаторами CSS, но пользуйтесь аккуратно некоторые, например Clean CSS, режут код, но с др стороны показывает лог сделанного.

Вот собственно и получаем оптимизированный CSS.
Поправьте, если что не так.

Комментарии

Аватар пользователя volocuga volocuga 10 декабря 2008 в 22:25

Отлично!
Я думал это уменя такая проблема-после творческих исканий таблицы напоминают ледовое побоище.Однако вопрос:не проще ли выдрать из page.tpl.php инклуд вставки стилей и дать обычную ссылку на свой файл?

Аватар пользователя PVasili PVasili 11 декабря 2008 в 11:19

Добавлю свои 5 копеек...
1) только в особых специфичных случаях, большинство сайтов желательно в админке использовать рабочую тему(заодно и недостатки виднее будут)
2) я так и не понял чем хуже вставка только своего CSS, а не того, что хочет drupal...

Аватар пользователя HIgor1968 HIgor1968 11 декабря 2008 в 12:10

2 - уменьшаем объем CSS файла, тем-более если используем свою тему, а не используем чужую.
1 - собственно тоже для уменьшения CSS при загрузке сайта "для всех".

при прогоне Dust-Me Selectors -ом вылазит много лишнего именно в system.css используемого только при администрировании и больше нигде, и смысл это грузить в рабочую тему.

Собственно данная оптимизация не актуальна на жирном тарифе. И применять ее или нет зависит от админа.

Аватар пользователя VladSavitsky VladSavitsky 11 декабря 2008 в 21:00

Спасибо, HIgor1968, за обяснение. Очень толково!

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

Аватар пользователя Sky Cat Sky Cat 15 декабря 2008 в 16:21

Добавлю дальнейшие шаги по пост-оптимизации.
1. Все css собираем в один (для пятерки есть замечательный модуль Support File Cache). Тоже самое и с js
2. Применяем технику minify (можно с помощью YUI Compressor. Этот модуль жмет и css и js)
3. Кэшируем картинки, скрипты, css и прочую статику навсегда. Скажем, лет на 10 вперед.
4. gzip