Я использую SASS, но думаю в LESS не сильно должно отличаться

Могу посоветовать pobem — он правильно раскрывает вложенность и принадлежность сущностей (модификатор модификатора или элемент элемента не создастся).

Например, так

Привет коллеги.  использую на сайте иконки fontawesome.  У них по умолчанию нэйминг не совпадает с BlockName-ElemName_modName_modVal. Как в такой и подобных ситуациях выходим из положения когда подключаем внешние стили? Спасибо.

есть порт fontAwesome в БЭМ

спасибо, пойду копать)

- https://github.com/tadatuta/bem-font-awesome-icons

спасибо, уже смотрю

Всем привет.
Подскажите пожалуйста есть 1 компонента, которая используется во многих местах.

Допустим назовем ее: ComponentA (и класс .component-a)
В этой компоненте есть элемент .component-a__title и элемент .component-a__sub-title.

Эта ComponentA используется в PageA и PageB

Я хочу чтобы в PageA это компоненета была с красным цветом шрифта, а у title был размер шрифта 24 пикселя.

Соотвественно какая я понимаю мне нужно сделать что-то типа того:

<div class="page-a">
      <div class="page-a__component_a     component_a">
             <span class="page-a__component_a__title     component_a__title">
             <span class="component_a__sub-title">
      </div>
</div>

и соотвествующие классы:

.component-a {
    color: black;
}

.component-a__title {
    font-size: 18px;
}

.component-a__susbtitle {
    font-size: 14px;
}


.page-a {
     background: blue;
}

.page-a__component_a {
     color: red;
}

.page-a__component_a__title {
   font-size: 24px;
}

Все ли я правильно делаю?

Кажется, нет. У вас элемент элемента.Сейчас попробую продемонстрировать более корректный вариант…

Итак, у вас есть блок (компонент), у которого есть дефолтное оформление:

.component-a {
     color: black;
}

.component-a__title {
     font-size: 18px;
}

Вроде понял.

.page-a .component-a
.page-a .component-a__title

И есть состояние, при котором меняется цвет и размер шрифта в элементе. Самому блоку знать, от чего это происходит, совсем не обязательно — мы моем использовать модификатор:

.component-a__special {
     color: red;
}

.component-a__special .component-a__title {
     font-size: 24px;
}

Нет, лучше не строить каскад от других блоков без острой необходимости.

А вот стилизация каскадом в рамках родного блока позволит использовать эти же стили и в .page-c и в .page-d без необходимости дописывать CSS

Т.е. если данное оформление будет только на странице PageA, то:

.component-a__page-a {
....
}

ну или если компонента используется в другой компоненте:

.component-a__component-button {...}

.component-a__page-a {
....
}

Тоже не похоже на то, что я писал. У вас «элемент page-a блока component-a», а это скорее всего модификатор.

.component-a__special {
     color: red;
}

.component-a__special .component-a__title {
     font-size: 24px;
}

upd. пардон, я опечатался:

.component-a_special {
     color: red;
}

.component-a_special .component-a__title {
     font-size: 24px;
}