Вопрос чисто к опытным верстальщикам?

Question

[Alibek Kulseitov]

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

.navbar .navbar-right-menu li.notify-dropdown .notify-list li a .notify-img {
}
.navbar .navbar-right-menu li.notify-dropdown .notify-list li a .notify-body {	
}

Как вы считаете как лучше быть ?
1) Убираем полный путь и пишем

.notify-list li a .notify-img и  .notify-list li a .notify-body

??
2) Или полный путь?

Ваши мнения?

Comments

[Сергей delphinpro]

Никто надеюсь не будет оспаривать мой опыт...

Оба варианта - плохие, первый более плохой чем второй =)
Селектор должен быть максимально коротким.
Единственный класс - идеально, два - допустимо, больше - уже жопа.

Повторю в который раз - код пишется один раз, а поддерживается потом долго. Не стоит создавать проблем себе или другим разработчикам этими цепочками селекторов. А проблемы будут. 100%.

[alex]

это не путь, а селектор. и да, что первый вариант, что второй - трэш, жалко того кто это будет в дальнейшем поддерживать. если есть возможность, рефакторите это с применением какой-нибудь методологии

[Alibek Kulseitov]

Сергей: Спасибо ) Приму к сведению

[Alibek Kulseitov]

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

[alex]

Алибек Кулсеитов:

БЭМ

.notify-list__img {
  /*code...*/
}

.notify-list__body {
  /*code...*/
}

Answer 1

[Antowa Kartowa]

Дк вроде уже ни в одной статье писалось, что цепочки селекторов это зло. Не столько с эстетической сколько с практической точки зрения.

1. Если тебе где-то нужно переопределить стили в каком-то отдельном контексте придеться такую же длинную цепочку фигачить.
2. Ну и размер файла стилей это не уменьшает.
3. Плюс дополнительные элементы цепочки это лишние циклы поиска браузером соответствии элементов в ДОМ структуре, что ест ресурс. Одна цепочка может не заметна, но полчища таких цепочек уверен могут показать существенную разницу.
4. Потом браузер ведь читает справа налево. В .navbar .navbar-right-menu li.notify-dropdown .notify-list li a .notify-body он сначало найдет все .notify-body, потом начнет проверять какие из них вложены в тег a и искать будет до самого верхнего эелемента пока не найдет или не упреться в бади. Потом начент проверять а какие из них лежат внутри списка li и тд. Куча ненужных обработок.
5. В этом же ключе стоит упомянуть, что селекторы в идеале все должны быть классами. А селекторы теги типа a, li, p, span и тд нужно избегать потому что они неспецифичны, не несут большой ценности, создают лишние цыклы обхода дерева элементов. По той же причине нельзя использовать селектор *.

В идеале вообще не должно быть вложенных селекторов. Почитай про БЕМ методологию. https://ru.bem.info/methodology/ Максимум 2 в крайних случаях три уровня вложенности.

Answer 2

[Ярослав Иванов]

Освоить БЭМ

Comments

[Alibek Kulseitov]

Уже читал, изучал. Помню что надо писать полный путь но в таком виде не вариант кажется

[Ярослав Иванов]

Алибек Кулсеитов: Что? Какой путь ? Я говорю БЭМ выучил и вопросы отпадут

Answer 3

[montray]

Лучший вариант - БЭМ, но если уж так нравятся вложенности - можно через препроцессоры. К при меру sass(scss), тогда код может принять такой вид:

.navbar {
  // стили .navbar 
  .navbar-right-menu {
    // стили .navbar-right-menu 
    li.notify-dropdown {
      // и т.д.
    } 
  } 
}