Как то можно оптимизировать такие less-конструкции?

Question

[lagudal]

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

.ammenu-menu-wrapper.-desktop .ammenu-main-container .ammenu-items .ammenu-item.-main.-full .ammenu-submenu .ammenu-categories-container.ammenu-categories .ammenu-item.-child .ammenu-wrapper .ammenu-link.-level1 {
  content: '';
  width: 100%;
  height: 150px;
  background-size: 120px 120px !important;
  background-repeat: no-repeat !important;
  display: block;
  padding-top: 120px;
}

И кроме того, есть индивидуальные селекторы, которые необходимо выделить, у каждого свой background.
Например,

.ammenu-menu-wrapper.-desktop .ammenu-main-container .ammenu-items .ammenu-item.-main.-full:nth-child(1) .ammenu-submenu .ammenu-categories-container.ammenu-categories .ammenu-item.-child:nth-child(1) .ammenu-wrapper .ammenu-link.-level1 {
  background-image: url(/pub/media/wysiwyg/pp-shop/pp-mega-menue/mm_jahresplaketten.png);
}

И таких будет штук 25-30, первый nth-child от 1 до 8, и второй- от 1 максимум до 7.
Отличие только background.
И вот все это должно быть в less.
Каким образом все это должно выглядеть?
Ну если для общего селектора записать как положено

spoiler

.ammenu-menu-wrapper {
  &.-desktop {
    .ammenu-main-container {
      .ammenu-items {
        .ammenu-item {
          &.-main {
            &.-full {
              .ammenu-submenu {
                .ammenu-categories-container {
                  &.ammenu-categories {
                    .ammenu-item {
                      &.-child {
                        .ammenu-wrapper {
                          .ammenu-link {
                            &.-level1 {
                              content: '';
                              width: 100%;
                              height: 150px;
                              background-size: 120px 120px !important;
                              background-repeat: no-repeat !important;
                              display: block;
                              padding-top: 120px;
                              overflow: visible;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

То что делать для конкретных? Ну не писать же 30 раз

spoiler

.ammenu-menu-wrapper {
  &.-desktop {
    .ammenu-main-container {
      .ammenu-items {
        .ammenu-item {
          &.-main {
            &.-full {
              &:nth-child(1) {
                .ammenu-submenu {
                  .ammenu-categories-container {
                    &.ammenu-categories {
                      .ammenu-item {
                        &.-child {
                          &:nth-child(1) {
                            .ammenu-wrapper {
                              .ammenu-link {
                                &.-level1 {
                                  background-image: url(/pub/media/wysiwyg/pp-shop/pp-mega-menue/mm_jahresplaketten.png);
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

Есть какой то способ, позволяющий лаконично все это описать?
Или забить и записать все в css ситнаксисе, да не мучаться?

Comments

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

Прекратить использовать БЭМ. В данном случае это зло

[RAX7]

Одиночка Айс, это не БЭМ, это ТРЭШ

[Роман Троицкий]

Одиночка Айс, БЭМом тут не пахнет)

Answer 1

[Aetae]

Ответ: ограничиться максимум двойной вложенностью.

Никакого смысла делать паровозы нет. А если есть - у вас проблемы с архитектурой.
Почитайте про БЭМ. Не обязательно ей следовать, но для понимания таких вопросов - полезно.

Comments

[lagudal]

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

[Aetae]

Ну что можно сказать? Говно оптимизировать невозможно.

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

[Aetae]

lagudal, максимум что можно сделать - написать как-то так:

.ammenu {
  &-menu-wrapper.-desktop 
  &-main-container 
  &-items 
  &-item.-main.-full:nth-child(1) 
  &-submenu 
  &-categories-container&-categories 
  &-item.-child:nth-child(1) 
  &-wrapper 
  &-link.-level1 {
    background-image: url(/pub/media/wysiwyg/pp-shop/pp-mega-menue/mm_jahresplaketten.png);
  }
}

Но не уверен, что это намного лучше.

Answer 2

[Денис Инешин]

1. Нельзя делать столь сильно вложенные конструкции. Это не читабельно и это невозможно поддерживать.
2. Если несколько элементов используют одни и те же стили - они должны иметь общий класс, не нужно дублировать стили.
3. Используйте БЭМ. Там максимальная вложенность ограничена и это заставит вас по другому проектировать код

Comments

[lagudal]

Один комментарий ко всем - я надеялся, что вы понимаете, что это не мой код и не моя архитектура: я не свалился с луны, я знаю что такое БЭМ, я не могу переписать с нуля офигительно большой модуль для Magento2, который разработала целая куча разработчиков, проектировщиков, и еще бог знает кого. Я не могу перестать использовать этот модуль, я не могу прекратить использовать magento2, так как это не я использую, а команда, в которой я работаю. И да, поменять команду или бросить эту работу я тоже не могу.
Я знаю, что подобные конструкции сплошь и рядом используются в коммерческой разработке, как пример, для платных шаблонов и расширений к различным cms, и с этим приходится мириться, мирно сосуществовать и работать.
Я лишь поинтересовался, что лучше всего сделать в конкретной ситуации, уж коль скоро такая ситуация имеет место быть, и причем достаточно часто.