Вложенность в css препроцессорах?

Question

[lavezzi1]

Здравствуйте. Я правильно понимаю, что черезмерная вложенность - это плохо?

.sidebar 
  width 260px
  height calc(100% - 65px)
  border-right 2px solid $border-color
  background-color #EFF4F7
  li 
    border-bottom 1px solid $border-color
    a 
      display inline-block
      width 100%
      padding 14px 25px
      i 
        margin-right 12px
    &:hover 
      background-color white
    
    &:first-child 
      border-top 1px solid $border-color

Такой код плох? Как переписать?

Comments

[Sarkis Arutiunian]

Я бы в less написла бы следующим образом, в принципе практически то же самое, но для читаемости фигурные скобки и отступы в нужных местах не помешают.

.sidebar {
  width 260px
  height calc(100% - 65px)
  border-right 2px solid $border-color
  background-color #EFF4F7
  
  li {
    border-bottom 1px solid $border-color
    &:hover 
      background-color white    
    &:first-child 
      border-top 1px solid $border-color    
      
    a {
      display inline-block
      width 100%
      padding 14px 25px
      
      i {
        margin-right 12px
      }
    }
  }   
}

Answer 1

[andreyqin]

Старайтесь использовать больше селекторов по классу и меньше - по тегу, чтобы код был гибче. Почитайте про различные методологии и подходы организации стилей (MCSS, AMCSS, OOCSS и др.) и именования классов (БЭМ).

Comments

[lavezzi1]

Не подскажите ссылку на статью про БЭМ? Моя потерялась, в ней разработчики bootstrap что ли писали про это

[andreyqin]

Статей про БЭМ огромное множество, воспользуйтесь поиском.

[Сергей Виноградов]

lavezzi1 Можно в гугле набрать БЭМ:)

[lavezzi1]

Сергей Виноградов: я именно ту статью ищу, не могу найти(

Answer 2

[Котик Антон]

Действительно чрезмерная вложенность, если она оправдана, это плохо лишь тем, что становится тяжело читать и поддерживать такой код. Ваш пример вполне читаем, всего 4 уровня. Вот, если почувствуете, что становится тяжело разобраться, какой селектор во что вложен, тогда можно подумать об "оптимизации", например так:

.sidebar 
  width 260px
  height calc(100% - 65px)
  border-right 2px solid $border-color
  background-color #EFF4F7

.sidebar-item 
  border-bottom 1px solid $border-color
  a 
    display inline-block
    width 100%
    padding 14px 25px
    i 
      margin-right 12px
  &:hover 
    background-color white  
  &:first-child 
    border-top 1px solid $border-color

Answer 3

[#FFFFFF]

На тему выбора селекторов и вообще написания css-кода есть офигенное руководство cssguidelin.es, правда, на английском. Я лично открыла для себя много полезного.

Comments

[lavezzi1]

На английском - просто прекрасно. Спасибо большое