Правильно ли делать первый и последний элемент списка по БЭМ?

Question

[Senseich]

Всем привет! Подскажите, мне к примеру нужно стилизовать первый и последний элемент списка. Я пробую верстать по БЭМу, ранее не пользовался этой методологией.
Логично ли эти элементы делать по правилам, мне кажется это нагроможденным или это нормально?:

<ul class="top-menu__list">
	<li class="top-menu__item"><a href="" class="top-menu__link top-menu__link_first">Homepage</a></li>
	<li class="top-menu__item"><a href="" class="top-menu__link">Style Demo</a></li>
	<li class="top-menu__item"><a href="" class="top-menu__link top-menu__link_last">Link Text</a></li>
</ul>

Comments

[Одиночка Айс]

А через css не судьба?))

Answer 1

[dom1n1k]

Не так, логичнее вешать модификатор на элемент item, а не link - потому что линк у своего родителя один и ничего не знает о том, что происходит снаружи.

Хотя мне кажется, что это тот редкий случай, когда даже с бэмом вполне уместно использовать селекторы first-child/last-child. Ну потому что не может такой модификатор объявиться где-то в средине и более одного раза.

Comments

[Senseich]

dom1n1k, тогда тут появится "микро" специфичность) .top-menu__item_first a {...}, потому, что я стилизую ссылки a (паддингом), чтобы область клика больше была.
Но мне кажется тоже, легче сделать выборкой в таких случаях

[Сергей delphinpro]

Да нет. Для БЭМа вполне нормальное назначение класса на ссылку, если именно для нее требуется стилизация.
И так тоже нормально

<li class="top-menu__item top-menu__item_first">
  <a class="top-menu__link top-menu__link_first">Homepage</a>
</li>

Но лично я предпочитаю (в подавляющем большинстве случаев) псевдо-селекторы.

[dom1n1k]

Сергей delphinpro, Неа. Назначить-то класс на ссылку нормально, но не в этом случае.
Модификатор first для item уместен, потому что итемов в меню пять и среди них есть первый и последний. Ссылка внутри своего итема - одна, всегда одна. Это чисто класс оформления ссылки, она не знает что там творится извне. И совершенно нормально тут написать так:

.top-menu__item_first .top-menu__link {
    ...
}

Тут кстати можно провести аналогию с теми же псевдо-селекторами. Если мы будем использовать :first-child - к какому элементу он будет применен?

[Senseich]

dom1n1k, я посмотрел на разных сайтах примеры реализации и многие так и делают:

li.class:first-child a {
    ...
}

[Senseich]

dom1n1k, ещё мини вопрос ... может я не так понимаю, но что означает ваше предложение?:

ничего не знает о том, что происходит снаружи

[Сергей delphinpro]

dom1n1k, Я согласен с вами, но лишь отчасти. Да, модификатор _first на ссылке не уместен. Больше подошел бы какой-нибудь _no-border.

[Senseich]

Сергей delphinpro, а что значит _no-border ? ) т.е. вы только с названием не согласны?

[Сергей delphinpro]

Senseich, ну это для примера (не самый лучший).
У нас отличаются стили ссылок в первом и последнем элементе.
Уверен, что различия там только визуальные, не функциональные.
Если мы вешаем класс именно на ссылку, а не на элемент списка, то неуместность имени _first описал доминик. Поэтому поменяем имя класса без привязки к нумерации.

[Senseich]

Сергей delphinpro, понял.. на самом деле я там просто убираю лишние padding'и - у первого элемента слева паддинг обнуляю, у последнего справа. (и пытаюсь всё по бэму делать).

[dom1n1k]

Senseich, "ничего не знает о том, что происходит снаружи" - это концепция, по которой компоненты должны обладать только необходимым минимумом информации друг о друге. Чем меньше компонент знает лишнего, чем меньше он полагается (явно или неявно) на эти знания, тем более он независим и легче поддается модификации в будущем.
Как правило, блок/элемент обладает информацией о своих потомках (ну потому что это его потомки, он ими управляет), но не должен ничего знать о вышестоящем уровне. И даже о своих братьях (блоках/элементах с того же уровня в дереве), по возможности, лучше ему не знать.

[Senseich]

dom1n1k, Сергей delphinpro , извините, что засыпал вопросами ... подскажите пожалуйста по оформлению, как лучше оформить CSS файл.

Вот у меня идет по порядку оформление:

.top-menu__list {...}

.top-menu__item {...}

.top-menu__link {...}

Допустим я не буду добавлять класс ссылке, а сделаю как выше писали:

.top-menu__item_first .top-menu__link {...} , либо
.top-menu__item:first-child .top-menu__link {...}

В плане правильности оформления, после чего прописывать это - после .top-menu__item {...} или после .top-menu__link {...}

Вроде как, имена должны быть сгруппированы, получается после .top-menu__item {...} , но с другой стороны это относиться к ссылке, тогда получается после .top-menu__link {...}

Дайте совет, как правильно делать по "фэншую" )

[Сергей delphinpro]

Senseich, Пишите как удобно. Группировка по смыслу — удобна, группировка ради группировки — нет.

[dom1n1k]

Я бы написал ниже. Любые составные селекторы (вложенность, плюсовый и тп) всегда пишу ниже первых упоминаний всех составных частей. Не может, например, p + p идти выше, чем p - только ниже.

[Senseich]

dom1n1k, Добрый день! Извините, что поднимаю старую тему, хотел поинтересоваться, а что в плане группировки селекторов, как будет правильнее делать? Вот у меня допустим идут селекторы в потоке .header__title и .header__description - у них {line-height: 1, margin: 0}, потом далее в потоке .header__search-field и .header__search-button - у них такие же {line-height: 1, margin: 0}. Где их грамотнее группировать?: после их объявления или можно до них, так написать:

.header__title, 
.header__description,
.header__search-field, 
.header__search-button  {
	line-height: 1;
	margin: 0;
}

[dom1n1k]

Senseich, лично я пишу сгруппированные селекторы до.

Важно отметить один момент. Я группирую селекторы только в том случае, если значения общих свойств не просто равны, а тождественно равны. И группировкой я не столько экономлю пару строк кода, сколько подчеркиваю: равенство значений - не случайное совпадение, а следует из логики макета.
Условно говоря, у меня есть логотип и меню и они имеют одинаковую высоту 100px. Указав эту высоту для них вместе, я подчеркиваю, что они обязаны быть равными по высоте всегда и нельзя менять им высоту раздельно.

[Senseich]

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