Нормы кодирования LessCSS

Question

Есть ли какие-либо?

После переключения на less, я обычно заканчиваю с кодом, как это:

.topNav{  
    prop: value; 
    ... 

    li{  
    prop: value; 
    ... 

    &:hover{ 
     ... 
    } 

    &.active{ 
     prop: value; 
     ... 

     a{ 
     prop: value; 
     ... 

     &:hover{ 
      prop: value; 
      ... 

      span{ 
      ... 
      } 
     } 

     span{ 
     ... 
     } 

     } 

    } 

    a{ 
     prop: value; 
     ... 

     &:hover{ 
     prop: value; 
     ... 
     }  

    } 

    } 

} 

Является ли это плохо?

Answer 1

Я бы сказал, что это не идеально. Вы должны проверить http://smacss.com - потрясающая книга по организации CSS. Это не МЕНЬЕ конкретный, бит все еще очень уместен.

Один из принципов связан с глубиной выбора. Часть вашего LESS выше компилируется до .topNav li.active a:hover span, который начинает немного углубляться (по крайней мере 4, а также любые элементы в иерархии между перечисленными). Проблема с этим тесно связана с вашим CSS с определенной структурой HTML. Сложнее будет изменить вашу разметку позже, не нарушая CSS.

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