избыточность селекторов

[cyklop77]

скажите пожалуйста существуют ли какие-нибудь программы или онлайн-сервисы наподобие минификаторов, которые умеют сокращать длинные цепочки селекторов? например такие

.nav_top ul .button_left.active .right .shellbutton .button_right .button_center{}

и вообще есть ли существенная польза от таких сокращений?

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

Edited June 2, 2012 by cyklop77

[Softlink]

.nav_top ul .button_left.active .right .shellbutton .button_right .button_center{}

По мне, так это ваще жесть. Намного удобнее использовать классы, чем такой каскад.

[cyklop77]

del

Edited June 2, 2012 by cyklop77

[Softlink]

Вы немного не поняли.

Вот этот селектор:

.nav_top ul .button_left.active .right .shellbutton .button_right .button_center

обращается в конечном итоге к .button_center, так почему не обращаться к нему напрямую: .button_center{..}?

Во-первых запись становится короче, а читабельность лучше.

Во-вторых в скорости каскад явно проигрывает.

Т.е. надо искать проблему из-за чего появилась надобность в каскаде из 6 селекторов.

[cyklop77]

длинные селекторы встречаются. пусть не в таком экстремальном виде как в моем примере(я взял такой для наглядности). структура в этом случае примерно так выглядит:

.nav_top ul {}
.nav_top ul .button_left {}
.nav_top ul .button_left.active {}
.nav_top ul .button_left.active .right {}
.nav_top ul .button_left.active .right .shellbutton {}
.nav_top ul .button_left.active .right .shellbutton .button_right {}
.nav_top ul .button_left.active .right .shellbutton .button_right .button_center{}

всё наглядно. править одно удовольствие

и мне проще исправлять структуру из таких селекторов чем например иметь дела с таким css:

.nav_top ul{}
.button_left{}
.active {}
.right {}
.shellbutton {}
.button_right {}
.button_center{}

надеюсь, понятно почему?

а теперь представьте, что некоторые селекторы пустые и указывать их в ccs незачем... а потом ещё представьте, что заказчик попросил добавить какую-нибудь рюшечку(спустя 2 месяца после сдачи поддерживаемого проекта)

я показал крайние случаи. но смысл такой

Edited June 2, 2012 by cyklop77

[Softlink]

Пример абсолютно не показателен.

1) Селектор потомка медленнее селектора класса. А такой каскад тем более.

2) То, что это удобнее конкретно вам, не обязательно должно быть удобно всем.

3) Вдруг у вас на каком-то уровне(самое плохое - на первом) изменился хоть один селектор и все, автоматом 6(!) селекторов становятся не рабочими. Это грозит либо багом на сайте, либо предварительной правкой всех селекторов. Пример http://jsfiddle.net/Softlink/3fusH/ и http://jsfiddle.net/Softlink/3fusH/1/

Добавили рюшечку:

.button_center_rushechka{}

<div class="button_center button_center_rushechka"></div>

[clavin]

длинные селекторы встречаются. пусть не в таком экстремальном виде как в моем примере(я взял такой для наглядности). структура в этом случае примерно так выглядит:

.nav_top ul {}
.nav_top ul .button_left {}
.nav_top ul .button_left.active {}
.nav_top ul .button_left.active .right {}
.nav_top ul .button_left.active .right .shellbutton {}
.nav_top ul .button_left.active .right .shellbutton .button_right {}
.nav_top ul .button_left.active .right .shellbutton .button_right .button_center{}

Этот код можно упростить так:

.nav_top ul {}
.nav_top .button_left {}
.nav_top .button_left.active {}
.nav_top .right {}
.nav_top .shellbutton {}
.nav_top .button_right {}
.nav_top .button_center{}

Большое количество классов ни к чему. А так видно, какие классы какому блоку принадлежат. В данном случае видно, что речь идёт о блоке с классом .nav_top