Итак, в связи с всеобщей тягой к ускорению веба, многие монстры интернета начали писать статьи и притворять в жизнь описываемые приемы. У Гугла есть статья про оптимизацию рендеринга в браузерах, у Мозиллы — про написание эффективного CSS. Я же хочу сделать «выжимку» из них ;-)

Как браузер обрабатывает стили

Ключевой момент — браузер читает правила справа налево. Мы же с вами пишем их слева на право. Чтобы почувствовать разницу, рассмотрим простой пример:

#global-wrapper ul.companies li a span { ... }

Браузер делаем следующее: сначала он находит все элементы <span>, затем берет те из них, что содержатся внутри <a>, потом внутри <li> и так далее. Соответственно, процесс обработки такого правила довольно долгий.

Основные типы селекторов и их эффективность

Существует четыре основных типа селекторов, на которых основаны все остальные. Ниже они представлены в порядке уменьшения их эффективности с точки зрения скорости обработки:

#global-wrapper   { ... } /* по id элемента — самый эффективный */
.partners         { ... } /* по классу */
ul                { ... } /* по тегу */
*, [rel=external] { ... } /* универсальный — самый медленный */

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

Советы по написанию селекторов

Избегайте универсальных селекторов

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

Избегайте лишних селекторов

Не используйте без нужды теги при селекторе по id или классу:

div#global-wrapper   { ... } /* Плохо */
#global-wrapper { ... } /* Хорошо */
... li.categories { ... } /* Плохо */
.categories { ... } /* Хорошо */

Излишняя вложенность селекторов так же нежелательна:

#company-profile ul li { ... } /* Плохо (ul лишний, так как li может содержаться только внутри ul) */
#company-profile li { ... } /* Хорошо */

Используйте class и id — самые быстрые селекторы

По возможности старайтесь использовать в ваших правилах селекторы по id или классам — они самые эффективные.

Используйте :hover только для ссылок в IE7 и IE8

Если вам нужно указать поведение элемента при наведении, используйте JavaScript.

Не используйте expression

Экспрешены работают только в IE 5-7, но при этом замедляют рендеринг страниц. Вместо них можно использовать JavaScript.

Дополнительные материалы

Рекомендую ознакомиться с оригинальными статьями от Гугла и Мозиллы:

• Optimize browser rendering (Google);
• Writing Efficient CSS for use in the Mozilla UI (Mozilla).

Еще есть небольшая заметка от Яндекса по поводу верстки новой страницы результатов поиска. Метод основан на указанных выше статьях.