Оптимизация CSS?

Question

[crazyjs]

Где почитать про оптимизацию CSS селекторов?

+ В частности, интересуют:
1. почему плох #ads_block a { ... } этот селектор?
2. Допустим, я использую препроцессор SASS и могу использовать extend

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.radius_10 {
  @include border-radius(10px); 
}
.box { 
  background: #000;
  width: 100px;
  height: 100px;
  @extend .radius_10;
}

В результате селектор .box добавится через запятую к селектору .radius_10 - это даст прирост производительности если применять такой подход ко многим селекторам вместо того чтоб к каждому делать @include border-radius(10px)( ведь с инклудом кода больше)?

Answer 1

[Андрей]

Почитайте эту статью, написано просто и понятно: frontender.info/writing-efficient-css-selectors
Ответ на первый вопрос в этом абзаце

Зачем совмещать селекторы? Вы сами ответили, что кода будет меньше.

PS: не используйте такие миксины,
во-первых для этого есть autoprefixer,
во-вторых border-radius уже сто лет работает без префиксов

PPS: Заниматься оптимизацией селекторов css стоит только если у вас все остальное идеально

Answer 2

[Сергей Протько]

Почитайте про то как происходит разбор селекторов и все встанет на свои места. Селекторы разбираются слева на право (или снизу вверх по дереву). То есть селекторы вида:

.some-specific-element

будут относительно быстрее

#some-hight-specific-element .some-not-so-specific-element

пососкольку не нужно сильно далеко траверсить DOM дерево.

Самый медленный вариант селекторов:

body.someSpecificClass *,
* + span,
html span

benfrain.com/css-performance-revisited-selectors-b...

идею вы должны уловить. Чем ближе в дереве - тем быстрее. А вообще с вложенными селекторами и каскадированием стилей лучше не баловаться слишком сильно. Учитывая что у вас есть препроцессоры.

Ну и про BEM почитайте (У Вадима Макеева был неплохой доклад на эту тему).
Использовать не агитирую но идеи которые в этой методологии заложены должны сильно облегчают жизнь.

p.s. посмотрите в сторону autoprefixer и избавьте свой CSS от этих ужасных миксинов. Как уже заметили выше добавлять префиксы для border-radius уже не имеет смысла. Ваши миксины это не учитывают, а autoprefixer имеет актуальную статистику и позволяет вообще не париться по поводу таких вот вещей.

Comments

[Сергей Протько]

Aingis: ну я просто для примера написал. Подправлю.

Answer 3

[rmaksim]

про "чем плох" полно статей
например clubs.ya.ru/bem/replies.xml?item_no=338
или вот xiper.net/learn/css/efficient-css/efficient-css-se...