Nesting in css preprocessors?

Question

css

Hello. I understand correctly that excessive nesting is bad?

.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

Is this code bad? How to rewrite?

Answer 1

Try to use more class selectors and fewer tag selectors to make your code more flexible. Read about different methodologies and approaches for organizing styles (MCSS, AMCSS, OOCSS, etc.) and class naming (BEM).