Теги в селекторах

[Gaspode]

Часто слышу про то, что мол надо избегать употребление селекторов типа. Например, вместо

div.block div.sub-block

писать

.block .sub-block

.

В этом, конечно, есть смысл, поскольку теги иногда приходится менять при вёрстке/программинге или в угоду SEO, сохраняя при этом структуру документа.

Однако этак можно дойти до маразма. Вот, скажем, у меня есть список, в котором десять элементов, в каждом элементе — ссылка, а в каждой ссылке — спан. Вешать классы на всю эту радость — сущий дурдом. То есть от подобных селекторов:

ul.primary-nav li a span

никуда не денешься. Ну ладно, li можно выкинуть — если считать, что код у нас по умолчанию валиден.

Да и вообще, я вот верстаю в notepad++, там если из css-файла все теги в селекторах удалить, получится весьма трудночитабельно.

В общем, что думаете по этому поводу? Стоит ли вообще этим заморачиваться и если стоит, то где грань?

Edited November 7, 2011 by Gaspode

[zSpx]

у меня есть список, в котором десять элементов, в каждом элементе — ссылка, а в каждой ссылке — спан.

ul.primary-nav li a span

.primary-nav {..}

.primary-nav li {..}

.primary-nav a {..}

.primary-nav span {..}

.primary-nav .item {..}

Очевидно же

Лично у меня составные селекторы из трех (в основном классы) встречаются невероятно редко. Как правило, это пары, т.е. цепочки указанные выше...

[Softlink]

ul.primary-nav li a span

.primary-nav {..}

.primary-nav li {..}

.primary-nav a {..}

.primary-nav span {..}

.primary-nav .item {..}

Очевидно же

Лично у меня составные селекторы из трех (в основном классы) встречаются невероятно редко. Как правило, это пары, т.е. цепочки указанные выше...

А если добавится подменю какое-нибудь? Со спанами. Переписывать CSS?

По теме. Сам почти перестал использовать селекторы по типу. И ни сколько не стесняюсь вешать классы. Проскакивают и такие селекторы, как в первом посте, но не более двух тегов вложенности.

[sigma77]

Стараюсь использовать везде классы. Аналогично - объявление состоит максимум из 2-3 селекторов. В notepade++ совместно с ZenCodingom - вообще никаких проблем. Да и система именования классов в целом вырисовывается уже для отдельных элементов, так что затруднений при чтении нет. Ну а если нужно что-то подправить - фаербаг с номером строки всегда под рукой

п.с. После того, как пару раз заменишь один тег на другой с соответствующей правкой css - желание использовать обращение по тегу резко уменьшается

Edited November 8, 2011 by sigma77

[zSpx]

А если добавится подменю какое-нибудь? Со спанами. Переписывать CSS?

.primary-nav .item
.sub-nav .sub-item

Если меню простое, можно просто переопределить. Тут главное изначально специфичность не набивать. а вообще, тут ключевое слово "если", как в теме про БЭМ, если проект хотя бы с намеком на развитие в будущем, нужно сразу подход при верстке менять и делать ее более продуманную, насыщенную классами.

[psywalker]

Я как-то тут показывал свой метод, к которому я пришёл. У меня нет с этим проблем, http://forum.htmlbook.ru/index.php?showtopic=30108&view=findpost&p=229248

Это мой эдакий мини-бэм, хотя понимаю, что так говорить глупо, но это чтобы было понятнее)

[Justnewone]

Глубоко убежден, что div.sub-block имеет смысл только если кроме дива таким классом обладает еще список, например.

Чем меньше специфичность селектора - тем меньше потом писать селектор чтобы перебить, если надо и переперебить...

У меня сейчас 95% селекторов простые, остальные 5% - это различные модификаторы.

[zSpx]

Глубоко убежден, что div.sub-block имеет смысл только если кроме дива таким классом обладает еще список, например.

Глубоко убежден, что одинаковые классы нужно давать элементам с одинаковым назначением. Родитель и предок не должны иметь одинаковые классы, исключение составляет некий модификатор, но в таком случае, он должен одинаково влиять на все элементы, т.е. в стилях определяться по классу. имхо.

[Justnewone]

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

Сам так не делаю, но вот оспорить 100% не получилось, может Вы знаете почему так нельзя?

[zSpx]

Ну почему же нельзя? Можно, раз делают, вопрос зачем? 1. Как Вы писали, что бы избежать ненужного нам наследования придется добавлять к классу имя тэга, что само по себе является лишним раздуванием кода (хоть и небольшим) 2. Что значит «нефункциональный тег?» Он ведь задает секцию с навигацией, в БЭМ же эти элементы называются блоками и ему задается поведение относительно других блоков, т.е. в этом и заключается его фукциональность, а раз это поведение различно у разных блоков, то и класс у него должен быть уникальным. Я так это вижу.

[Justnewone]

Нефункционлаьный, потому что на нем не сидит ничего вообще, кроме какой-нет картинки-бекграунда, убери его и оставь просто ул, ничего не поедет. Но рад, что Вы на самом деле не так категоричны оказались, БЭМ не панацея, хотя и лучшего лично я пока не вижу. Но как в огромном механизме - там много чего есть странного, я был на конфе яндекса и задавал лично вопросы, многое не раскрывается в принципе.

[zSpx]

В таком случае, я бы добавил какой-нибудь префикс типа w-, wrap-, container- и пр. что бы обозначить, что это просто обертка и получил бы в CSS логичный говорящий класс .wrap-nav, а не div.nav который может ввести в заблуждение, по крайней мере меня. И я не пропагандирую БЭМ, я его рассматриваю не как какую-то единственно верную методологию, а просто как некую полезную коллекцию подходов в верстке. Именование классов, модульность, модификаторы - все это выглядит весьма логичным в определенных ситуациях и, в принципе, было и существует вне всяких БЭМов, просто потому, что это удобно и решает проблемы, мне кажется употребляя эту аббревиатуру, становится понятно(?) что я имею в виду. И более глубоко я в него не копал, т.к. даже рядом не стоял с проектами величиной с яндекс или мэйл, где использование всего "потенциала" БЭМ может быть и оправдано.

Edited November 10, 2011 by zSpx

[Switch74]

А можно ли сделать тогда вместо div.wrap-nav например wrap.nav

просто мне не очень нравятся длинные классы у тега,

а иногда их бывает ещё и несколько присвоено одному объекту.

Понимаю, что иногда от длинного названия класса для ясности ни куда не уйти...