А про что 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

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

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