Написание эффективного CSS

Question

Хорошо, итак, в другом вопросе что-то обсуждалось, и была упомянута эта ссылка:

https://developer.mozilla.org/en/Writing_Efficient_CSS

В этой статье они говорят о некоторых вещах, которых я не знал, но прежде чем я спрошу о них, я должен спросить вот о чем...Применимо ли это к CSS, интерпретируемому Firefox?Простите мою тупость, но я не был уверен, что они имели в виду под пользовательским интерфейсом Mozilla.(не делай мне больно!)

Если это действительно применимо, когда они говорят:

Избегайте выбора потомка!

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

* BAD - treehead treerow treecell { }
* BETTER, BUT STILL BAD (see next guideline) - treehead > treerow > treecell { }

Селектор-потомок - это просто пробел?И тогда в чем была бы разница между дочерним элементом и потомком?Дочерний элемент - это элемент внутри другого, но разве это не то же самое, что потомок?Пока я пишу, я думаю, что, возможно, уже понял это.Потомок может быть ребенком / внуком / правнуком / и т.д.?А ребенок - это только одна глубина?

Еще раз извините за глупый уровень моего вопроса...просто интересно, потому что я постоянно использую потомков в своем CSS для своего сайта.Но да, если речь идет не о Firefox, то весь этот вопрос бессмыслен...

Если это не о Firefox, есть ли у кого-нибудь ссылка на статью, объясняющую эффективность Firefox или браузеров в целом?

Answer 1

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

Применение CSS на обычной HTML-странице - одна из самых быстрых операций, которая не происходит при загрузке страницы.
Кроме того, в статье может быть предложен самый быстрый способ применения правил css, но какой ценой?Например, они предлагают не иметь более одного класса для каждого правила:

ПЛОХОЙ - .treecell.с отступом { }
ХОРОШО - .treecell-с отступом { }

Это почти возмутительно.Это может привести к более быстрому использованию CSS, но кого это волнует?Предполагая, что у вас уже есть .treecell и .indented, следование этим предложениям приводит к сложная логика, более сложное техническое обслуживание, дублированный css правила, более сложный JavaScript (который стоит намного дороже CSS) и т.д.
Они предполагают не используя все богатство CSS селекторы и замена этих селекторов плоскими классами, что является позором.

Answer 2

Потомок может быть ребенком / внуком / правнуком / и т.д.?А ребенок - это только одна глубина?

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

И да, эта статья посвящена как Firefox, так и браузерам в целом.Большая часть (все?) из того, что в нем содержится, применима к любому движку рендеринга страниц.

Answer 3

... пока я пишу, я думаю, что, возможно, уже понял это.Потомок может быть ребенком / внуком / правнуком / и т.д.?А ребенок - это только одна глубина?

Действительно.

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

Answer 4

"Родитель > потомок" находится всего на один шаг ниже, в то время как "потомок-предок" может быть на один или несколько шагов ниже.

Еще лучше использовать теги "#id" везде, где это возможно, чтобы сократить время поиска по DOM.

Answer 5

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

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

Answer 6

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

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

Answer 7

О'Рейлис "Еще более быстрые веб-сайты" есть целая глава по этому поводу, озаглавленная "Упрощение CSS-селекторов".Он ссылается на вашу ссылку в Mozilla.

Я думаю, что стоит иметь в виду два момента.

1. Да, если бы вы сделали это, насколько это возможно, ваши HTML и CSS представляли бы собой мешанину стилей и, возможно, еще более неэффективны из-за увеличенного размера файла.Выбор наилучшего баланса зависит от разработчика.Не мучайтесь над оптимизацией каждой строки по мере ее написания, заставьте ее работать, а затем посмотрите, что может принести пользу.

2. Как отметил другой комментатор, браузеру требуются миллисекунды, чтобы понять, как применять ваши стили при загрузке страницы.Однако, где это может оказать гораздо большее влияние, так это с DHTML.Каждый раз, когда вы меняете DOM, браузер повторно применяет всю вашу таблицу стилей к странице.В этом сценарии многие неэффективные селекторы могут оказать заметное влияние на вашу страницу (воспринимаемая задержка / невосприимчивость).

Answer 8

Документация для Google Page Speed (дополнение для Firefox / Firebug) включает в себя хорошая страница на эффективном CSS.