имя для класса
 

как вы предпочтете записать имя класса (css) для элемента который состоит в какой-то группе чтобы в имени фигурировало и имя и его группа. суть опроса понять какой подход более интуитивно понятен, что полное название класса состоит из двух половинок "группа и имя элемента"
------
чуток добавлю данных для полноты картины
1) группа-элемент
2) группа_элемент

1) какойто_элемент
2) какойто-элемент

.some-group .some-element {
    /* ... */
}

<div class="some-group">
    <div class="some-element">
    </div>
</div>

или

.some-group {
    /* ... base group styles ... */
}
.some-element1 {
    /* ... element1 overloaded styles ... */
}
.some-element2 {
    /* ... element2 overloaded styles ... */
}

<div class="some-group some-element1"></div>
<div class="some-group some-element2"></div>

Не?
Или вы как-то еще группируете элементы?

Gvozd,
я хочу слить в одну запись
a) .some-group .some-group .some-group .some-group {}
b) .some .some .some .some {}

нужно их слить в одно предложение без порбелов и в качестве разделителя могу использовать только [-] или [_] .


1:
a) .some_group-some_group-some_group-some_group {}
b) .some-some-some-some {}

2:
a) .some-group_some-group_some-group_some-group {}
b) .some_some_some_some {}


я склоняюсь к варианту 1, что группы нужно разделять символом [-] , потому как если имя группы состоит только из одного слова (.some .some .some .some {} ) то оно сольется в привычный css вид ( .some-some-some-some {} )

знак [ _ ] в языках программирования(и не только) часто используется как альтернатива [пробела] там где пробел использовать нельзя. "some group" - > some_group . потому знак [ _ ] как нельзя кстати можно использовать для разделителя в наименовании группы

в пользу первого варианта мои аргументы такие

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

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

но вы не в теме )

.some_group-some_element {
    /* ... */
}
<div class="some_group">
    <div class="some_group-some_element">
    </div>
</div>

ИМХО, сейчас такой проблемы не стоит.
браузеры лучше написаны, и компы помощнее
так, что можно не писать такие хаки производительности, а писать естественным и очевидным способом. Например как мой первый вариант
не, не в теме)))
в далеком 2000-м моим самым главным достижением была прочитанная книга "как писать игры для ZX Spectrum"
о вебе я тогда не имел ни малейшего понятия

А я от такого отказался, в пользу того, что написал Gvozd. При разрастании проекта это становиться неудобным.

Тогда уж лучше по id, а классы вообще не использовать

Стоит. Не буду называть точные цифры, чтобы не наврать, т.к. не помню, но в Яндекс.Почте выигрыш в скорости отрисовки был значительный после отказа от каскадов.

Архитектурная причина более важная. Про абсолютно независимые блоки здесь вроде слышали. Допустим у нас есть два разных списка: list1 и list2. У каждого из них внутри есть элементы item. В каскадном варианте стили для итемов будут

.list1 .item {}
.list2 .item {}

Всё прекрасно, пока мы не вложим один список в другой.

В АНФ стиле такой проблемы нет

.list1__item {}
.list2__item {}

Названия, кстати

.some-group__some-element {}
.some-group_modifier {}
.some-group__some-element_modifier {}

Вот ещё у меня есть на тему http://alljs.ru/crossjs/overview/classnames

Kolyaj, а как попасть на эту статью с главной страницы?:)

Никак, это недописанная серия.

Получается что при модификаторе:

my-app-panel_modifier

my-app-panel__some-element_modifier

...

my-app-panel__some-element__some-element1__some-element2_modifier

?

Такая вложенность не нужна, так что такого не будет.

У меня подобное было, поэтому и отказался

Ну рассказывай тогда, как такое могло получиться :) И в пользу чего отказался.

ну, дык в сторону каскадов и отказался, но скорость да падает сильно.

А получилось такое как?

Не понимаю вопроса. Класс элемента отражает положение элемента в ветке дерева. По моему это и так ясно: my-app-panel__some-element__some-element1__some-element2. Или что имеется в виду?

Нет, это лишнее. Весь путь к элементу указывать ни к чему. А если он переместится, класс менять? Достаточно просто соблюдать уникальность внутри одного блока, не волнуясь, что будет пересечение с другими блоками.

Допустим у нас есть:

<div class="my-app-panel">
   <div class="my-app-panel__magazin-element">
      <div>
         <div>
            <div class="что пишем сюда?"></div> //magazin-element__inner-div
         <div>
      </div>
   </div>
</div>

или лучше комбинировать с каскадами или у всех div должны быть class?

А про что div? Какой у него смысл? Если это вложенный элемент для вёрстки то я в таких случаях пишу my-app-panel__magazin-element-i. Ну и избыточность полезна только для верхнего уровня (my-app-panel), внутри блока следить за уникальностью гораздо легче, поэтому достаточно осмысленности (my-app-panel__magazin, my-app-panel__magazin-i).


У всех элементов, к которым ты обращаешься в CSS или в JS должен быть класс.

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

my-app-panel__magazin-element__i

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

Это ж всё не просто так для красоты, тут решается вполне определённая проблема. Есть у нас много всяких блоков на сайте. За именами блоков мы следим, они должны быть уникальными, иначе мы просто не сможем к ним обращаться. А вот с именами внутренних элементов всё сложнее, т.к. их на порядок больше и следить за всеми ими невозможно, не говоря уже о том, что одинаковые по смыслу элементы могут содержаться в разных блоках.

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

Т.е. порядок состоит в том, чтобы у всех элементов были префиксы того блока, в котором находится этот элемент.

Я же не против основной идеи меня смущает только вот это:
когда у меня названия стали принимать вид:

my-app-panel__magazin-element-catalog-a-box   // суфикс --> catalog-a-box

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

my-app-panel__magazin-element__catalog-a-box   // суфикс --> catalog-a-box

я немного слукавил в начале, поэтому простите меня за это :)
и я использовал одно подчеркивание [_], поэтому выглядело это так:

my-app-panel_magazin-element-catalog-a-box   // суфикс --> catalog-a-box

Непонятно, зачем добавлять magazin-element перед catalog-a-box. Для того, чтобы обозначить, что catalog-a-box лежит в magazin-element? Так это неважно и даже вредно на этом акцентироваться. Т.е. класс будет my-app-panel__catalog-a-box.

Идея была в том чтобы не нужно было следить за уникальностью, т.к. короткое название может повториться и придется придумывать похожее название - синоним. А точнее чтобы исключить подобную вероятность:

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

Это не понял.

Там в статьях я описываю разработку UI с помощью моего конструктора Widget. Идея в том, что внутри JS-"класса" содержится HTML, CSS для этого HTML и JavaScript, работающий с этим HTML и с вложенными виджетами. У виджета всегда есть имя, т.е. ссылка на виджет, например, App.MyPanel. Из этого имени и строится префикс для классов, чтобы а) префикс был уникальным, б) не надо думать над именем класса. А что после префикса, по большому счёту неважно, но лучше за этим тоже следить, чтобы шаблоны от виджета к виджету не рвались.


Пока писал, понял, что ты имел в виду. Стирать не буду, пусть лежит :)

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

От себя добавлю:

.foo_bar .fb_baz {}

А так, вообще стараюсь не плодить идентификаторы. и делаю что-то вроде такого:

#foo > div p

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

Я начал так писать до того, как стал яндексоидом.

подчёркивание визуально сильнее разделяет чем дефис => логичней подчёркивание использовать для разделения пространств имён, а дефис - для слов в именах:

.my_side-bar_header

а для модификаторов удобно использовать символ равенства:
.state-active\=true

Интересно теперь узнать у тех кто выбрал дефис, вы всех языках придерживаетесь такого правила?

во всех, где он допустим синтаксисом.

а php-шники репрезентативны? :) У меня, например, my_side-bar_header автоматически воспринимается как bar_header в my_side. Чтобы правильно это прочитать, надо приложить какое-то усилие. По поводу "что использую"... дефис (side-bar-header) и вложенность не больше двух элементов (то, о чем говорил Kolyaj), пока что меня это устраивает

x-yuri, да.

наткнулся на статью (Of Spaces, Underscores and Dashes) и вспомнил про эту тему :)