Иерархические/вложенные стили в МЕНЬШЕ

Question

Для лучшей читаемости и чистый код, я использую вложенные стили в LESS, как это:

.item { 
    .title { 
     /* ... */ 
    } 
    .content { 
     /* ... */ 
    } 
} 

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

.item .title { 
    /* ... */ 
} 

предположительно очень плохо для исполнения. Это все еще верно для современных браузеров? И если да, какова альтернатива? (Моя цель здесь организован код, я, вероятно, на самом деле не нужен селектор потомка.)

Answer 1

Насколько я знаю, .item .title это единственный способ, чтобы выбрать .title внутри .item (.item > .title как уже упоминалось @Oriol можно также работает в некоторых ситуациях). Меньше позволяет вам вложить это отношение.

Когда вам это не нужно, вы также не должны вставлять его в свой код Less. Возможные комментарии использования, чтобы понять, что группа селекторов принадлежит определенному другому селектору. В качестве альтернативы рассмотрим методологию BEM, см. http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/, затем .item .title можно записать как item__title {}.