Skip to content

Commit

Permalink
translated selectors' efficiency
Browse files Browse the repository at this point in the history
  • Loading branch information
Starkov Vladimir committed Oct 24, 2012
1 parent f97c210 commit bdb09fc
Showing 1 changed file with 10 additions and 31 deletions.
41 changes: 10 additions & 31 deletions README Russian.md
Original file line number Diff line number Diff line change
Expand Up @@ -424,50 +424,29 @@ them in CSS _ever_.

## Cелекторы

Keep selectors short, efficient and portable.
Сохраняйте селекторы эффективными, рациональными и переносимыми.

Heavily location-based selectors are bad for a number of reasons. For example,
take `.sidebar h3 span{}`. This selector is too location-based and thus we
cannot move that `span` outside of a `h3` outside of `.sidebar` and maintain
styling.
Тяжелые, глубоко вложенные селекторы никуда не годятся по ряду причин. Например возьмем `.sidebar h3 span {}`. Этот селектор основан на вложении и поэтому нет возможности переместить `span` из `h3` и из `.sidebar` — следовательно, нет возможности обеспечить поддержку стилей на должном уровне.

Selectors which are too long also introduce performance issues; the more checks
in a selector (e.g. `.sidebar h3 span` has three checks, `.content ul p a` has
four), the more work the browser has to do.
Слишком длинные селекторы также вызывают проблемы производительности; чем больше проверок в селекторе (например селекторе `.sidebar h3 span` имеет три проверки, а `.content ul p a` — четыре), тем больше работы выполняет браузер.

Make sure styles aren’t dependent on location where possible, and make sure
selectors are nice and short.
Старайтесь следить, чтобы ваши стили не зависели от вложенности, где это только возможно, а также что ваши селекторы были короткими и легко воспринимаемыеми.

Selectors as a whole should be kept short (e.g. one class deep) but the class
names themselves should be as long as they need to be. A class of `.user-avatar`
is far nicer than `.usr-avt`.
Селекторы сами по себе должны быть короткими (например, состоящим из одного простого селектора), но имена классов должны быть такими длинными, насколько это требуется. Класс `.user-avatar` приятнее и понятнее, чем `.usr-avt`.

**Remember:** classes are neither semantic or insemantic; they are sensible or
insensible! Stop stressing about ‘semantic’ class names and pick something
sensible and futureproof.
**Запомните:** Классы на самом деле ни семантичны, ни не семантичны; Они применимы или нет! Перестаньте беспокоиться о «семантике» имён классов и выберите что-нибудь удобное в применении, с расчётом на дальнейшее использование.

### Перенасыщеные селекторы

As discussed above, qualified selectors are bad news.
Как говорилось выше, увидеть специфичный селектор — всегда плохой знак.

An over-qualified selector is one like `div.promo`. You could probably get the
same effect from just using `.promo`. Of course sometimes you will _want_ to
qualify a class with an element (e.g. if you have a generic `.error` class that
needs to look different when applied to different elements (e.g.
`.error{ color:red; }` `div.error{ padding:14px; }`)), but generally avoid it
where possible.
Перенасыщеный (гиперспецифичный) селектор это один из разряда `div.promo`. Скорее всего, мы можем достичь тот же самый эффект, используя лишь `.promo`. Конечно, иногда мы *хотим* определить класс в зависимости от элемента (например, если у вас есть общий класс `.error`, который должен выглядеть по разному на разных элементах (например, `.error { color: red; }` `div.error { padding: 14px; }`)), но по возможности избегайте этого, где это только возможно.

Another example of an over-qualified selector might be `ul.nav li a{}`. As
above, we can instantly drop the `ul` and because we know `.nav` is a list, we
therefore know that any `a` _must_ be in an `li`, so we can get `ul.nav li a{}`
down to just `.nav a{}`.
Другим примером слишком перенасыщенного селектора может быть `ul.nav li a {}`. Как описано выше мы сразу можем выкинуть `ul`, и так как мы знаем, что `.nav` это список, то ссылка будет вложена только в `li`, поэтому мы можем сократить `ul.nav li a {}` до `.nav a`.

### Производительность селекторов

Whilst it is true that browsers will only ever keep getting faster at rendering
CSS, efficiency is something you could do to keep an eye on. Short, unnested
selectors, not using the universal (`*{}`) selector as the key selector, and
avoiding more complex CSS3 selectors should help circumvent these problems.
Хоть это и правда, что браузеры только улучшают свои показатели в скорости рендеринга CSS, «Эффективность» — это то, на чём мы можем быть сфокусированы всегда. Короткие селекторы, неиспользование универсального (`* {}`) селектора и избегание больших комбинаций CSS3 селекторов должно помочь обойти проблемы производительности.

## Ключевой элемент селектора

Expand Down

0 comments on commit bdb09fc

Please sign in to comment.