2014-09-05 6 views
8

Я знаю, что это придирчивым, но я работаю с редактором, который CSS и Линц постоянно жалуетсяВ CSS, [class] [class] быстрее, чем [element] [class]?

don't use adjoining classes > e.g. .foo.bar 

Я игнорируя предупреждения, но это сделало меня любопытным и не может найти что-нибудь на нем , Скажем, у меня есть:

<ul class="foo bar"></ul> 

который селектор CSS быстрее:

ul.foo 
    .bar.foo 

Я знаю селекторы работать справа налево, так что в обоих случаях foo будет выбран первым, после чего браузер должен найти в найти все ul в выборе (?) или все .bar элементов (?).

Вопрос:
В CSS это [class][class] быстрее, чем [element][class]?

Спасибо!

+3

Я не мог сказать, что быстрее, некоторые профилирующие инструменты в webdevloper могут помочь рассказать об этом, но это 2 очень разных селектора, которые выбирают 2 разных набора элементов. Оба они работают одинаково с вашим примером, но, конечно, не в большей степени. P.S: Я не считаю это «придирчивым», я бы назвал это «внимание к деталям». На странице с большим количеством элементов, подлежащих анализу/выбору, такая оптимизация может действительно иметь значение. На «нормальных» страницах вы точно не увидите ничего ... –

+0

Хорошая точка. Все еще любопытно. – frequent

+0

Некоторые хорошие правила css: https://www.modern.ie/en-us/performance/css-web-performance-optimizations – Tim

ответ

2

Я думаю, что общее правило и то, что я заметил сам, это то, что было бы немного быстрее использовать класс .class .class, хотя это будет зависеть от самой страницы (и я полагаю, какие стили применяются к степень).

Скорость различных селекторов, как правило, согласовывается (от самого быстрого до самого медленного);

ID -> Class -> Type -> соседнему -> Ребенок -> Потомок -> Универсальные -> Атрибут -> Псевдо

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

Это также соответствует многим руководствам по написанию CSS, которые говорят, что имеет смысл использовать классы для стилизации.

Я также помнил good article, который охватывает эффективность CSS. Я надеюсь, что эта статья со мной согласна, так как я не читал ее некоторое время. Где-то на сайте они также рассматривают технику Block Element Modifier для написания CSS, что является интересным чтением и хорошим стартовым местом, если вы хотите более эффективно структурировать свой CSS (хотя вам нужно немного окунуться в первую очередь время).

4

Только для полноты: Почему css lint жалуется?
Ответ: Присоединенные классы не будут работать для некоторых очень старых браузеров.

Цитата http://csslint.net/about.html:

Не используйте смежные классы

Прилегающие классы выглядят как .foo.bar. Хотя технически разрешенные в CSS, , они не обрабатываются должным образом Internet Explorer 6 и ранее.