Эффективны ли полностью квалифицированные стили CSS?

Ответ 1

Google (а не поиск, на самом деле их), кажется, думает, что это действительно приводит к результату.

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

Есть также некоторые ориентиры, доступные публике, о селекторах CSS влияют на скорость рендеринга:

• http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
• http://blog.archive.jpsykes.com/153/more-css-performance-testing-pt-3/

Я, однако, думаю, что это, по большей части, конский навоз. Вы можете повысить FAR на скорости загрузки и рендеринга вашей страницы, используя некоторые другие простые оптимизации. Я считаю, что ваше здравомыслие и хорошо организованная база кода должны быть первыми. Если бы это было так же важно, как некоторые из них, все мы вернемся с помощью HTML < 4 атрибута (bgcolor =, border = и т.д.) Для стилизации наших веб-страниц.

Ответ 2

• Поиск #id выполняется быстро.
• Поиск a tag немного медленнее.
• Поиск a .class является самым медленным.

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

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

Ответ 3

Вам может быть интересен Дэвид Барон (Mozilla) Обсуждение Google Tech.

Ответ 4

У меня есть сайт, где другой дизайнер использовал сильно квалифицированные стили и обслуживание - это кошмар. (квалифицированные стили - только одна часть этого)

В принципе, вы не можете коснуться или упростить структуру html, не разбирая половину стилей, и стили часто не каскадируются должным образом в новых дополнениях контента. Если вы добавите новый css, вы, в свою очередь, должны квалифицировать свои новые правила в значительной степени, или половина из них в конечном итоге переопределяется каким-либо существующим правилом, потому что он содержит такую ​​специфичность.

Таким образом, с точки зрения технического обслуживания это неэффективно. Также не эффективен с точки ввода.

Ответ 5

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

Ответ 6

Есть ли эффект от полного соответствия стиля, т.е. больше?

Да, при каждом динамическом изменении DOM-дерева выражение CSS должно быть удалено по крайней мере из некоторых узлов. Я сомневаюсь, что это приведет к любой заметной задержке, однако.

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

Если он находится под вашим контролем, придерживайтесь простых классов (даже если у вас их больше) и как можно меньше уровней (выполнение некоторых относительных размеров шрифтов является единственным вариантом использования, когда я использовал несколько уровней, и даже это было несколько лишним). Это просто приводит к слишком когнитивной способности отслеживать структуру страницы в вашей голове.

Ответ 7

Хотя ваш вопрос касается производительности (и я бы предложил, измерил ее). Я бы очень хотел добавить, что вы всегда должны стараться использовать кратчайшее определение, чтобы идентифицировать правильные элементы.

Причина заключается не в размере файла, а в возможности расширения вашего сайта без изменения основного css.

Например, у вас есть эта часть на вашем сайте html:

<div id="Header">
    <h1>Css example</h1>
    <h2>Welcome to the css example site</h2>
    <p>An example page by davy</p>
</div>

и это css:

#Header 
{
    background-color: #ffeedd;
    padding: 1em;
}
#Heading h1
{
    font-size: 3em;
    color: #333;
}
#Heading h2
{
    font-size: 1.5em;
    color: #666;
}
#Heading p
{
    margin: 0 0.5em 1.5em 1em;
    font-size: 1.1em;
    color: #999;
}

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

Если вы решили использовать div#Header в главном файле css, вам нужно либо изменить html (который в зависимости от вашей системы может означать создание другого шаблона/главной страницы), чтобы добавить дополнительный класс, либо создать более квалифицированный селектор css, например body div#Header.

Используя самый короткий селектор, вы все равно можете использовать div#Header { background : ... }, чтобы изменить заголовок. Вы можете создать дополнительный файл css и загрузить его в свой заголовок на этой странице (если это разрешено) или добавить определение стиля непосредственно в раздел <head>. Хорошая вещь об этом - ваш css файл не растет с селекторами для каждой отдельной страницы, и вы можете держаться подальше от classitis.

Вы также можете использовать его для переключения метода калибровки вашей страницы (статического/жидкого), чтобы один шаблон/главная страница использовала по умолчанию css, а другая - из этого шаблона/главной страницы и просто связывает css под названием FluidWitdth90.css для изменения шаблона до компоновки жидкости на 90%.