Какова производительность при использовании нескольких/двойных/условных селекторов CSS? Например .hello1.hellob

Question

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

http://css-tricks.com/efficiently-rendering-css/

#main-navigation { }  /* ID (Fastest) */ 
body.home #page-wrap { } /* ID */ 
.main-navigation { }  /* Class */ 
ul li a.current { }  /* Class * 
ul { }     /* Tag */ 
ul li a { }    /* Tag */ 
* { }      /* Universal (Slowest) */ 
#content [title='home']  /* Universal */ 

Мой вопрос, как это производительность при использовании селекторов, которые требуют двойной селекторов, например:

.class-one.class-two { 
} 

Если бы мы поставили эти селекторы в список производительности выше, где они будут?

Answer 1

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS?redirectlocale=en-US&redirectslug=CSS%2FWriting_Efficient_CSS#How_the_Style_System_Matches_Rules

Посетите эту ссылку. Это может быть полезно.

Answer 2

Вы не должны быть настолько параноиками об этом. Более важно иметь хороший и чистый код, избегая хаков. Но есть некоторые основные правила:

#main-navigation { }  /* Never style ID's directly, use classes instead*/ 
body.home #page-wrap { } /* If you ever have to style ID's, do it directly, they are unique and doesn't need any selector. You're just wasting bytes */ 
.main-navigation { }  /* No problem at all, but try to be more abstract. a class should not be so specific, try to reuse code as much as you can.*/ 
ul li a.current { }  /* You should optimize this, you could use just ul .current. Try to use as little selectors as you can, it'll have good performance and will be easier to deal with. Try to use just 3 selectors at the max, so you''l have a good performance and clean code. */ 
ul { }     /* No problem here */ 
* { }      /* You'll won't have any serious problem if you use with caution. Properties like border-box are a good use of it. Anything that you have to set globally in your stylesheet is welcome to use it. */ 
#content [title='home']  /* Same as *. Don't overdo and you're good to go. */ 

Более важным является то, чтобы иметь более чистый код, как это возможно. Старайтесь избегать чрезмерных переопределений, неиспользуемого кода, слишком много селекторов, повторного кода и хаков. Хорошая вещь - использовать OOCSS и BEM. Если вы используете фреймворк, попробуйте использовать что-то вроде inuit.css, которое придерживается хорошей практики и всего.

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

Пс .: Если вы используете анимацию, придерживайтесь переходов и анимаций CSS3, потому что есть хороший шанс, что они будут ускорены GPU и будут лучше работать.

Answer 3

Кроме того, «Написание эффективного CSS» Mozilla статью, вы также можете быть заинтересованы в разговоре «Faster HTML и CSS: Layout Engine Internals для веб-разработчиков» по ​​Googlers http://www.youtube.com/watch?v=a2_6bGNZ7bA

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

Этого можно избежать, если следующие рекомендации BEM CSS относительно независимых блоков CSS. http://bem.info/method/definitions/#IndependentCSS