Какие правила существуют для именования по методологии BEM?

Методология BEM (БЭМ) — это подход к разработке интерфейсов, который способствует созданию модульных и переиспользуемых компонентов. BEM расшифровывается как "Блок, Элемент, Модификатор". Основные правила именования по методологии BEM следующие:

1. **Блок** — это самостоятельная сущность, которая имеет смысл. Блок может быть как простым, так и сложным. Пример: `card` (карточка), `menu` (меню), `header` (заголовок).

   Пример имени блока:
   - `card`

2. **Элемент** — это часть блока, которая не может быть использована отдельно от блока. Элементы обозначаются двойным подчеркиванием (`__`).

   Пример имени элемента блока `card`:
   - `card__title` — заголовок карточки
   - `card__image` — изображение карточки
   - `card__description` — описание карточки

3. **Модификатор** — это флаг, который изменяет внешний вид или поведение блока или элемента. Модификаторы обозначаются одним подчеркиванием (`_`).

   Пример имени модификатора блока `card`:
   - `card--highlighted` — выделенная карточка
   - `card--disabled` — неактивная карточка

4. **Именование с учетом контекста**: Если у вас есть несколько блоков, которые могут быть схожими, следует добавлять префиксы к именам, чтобы избежать конфликтов и возможных путаниц.

   Например, если есть три блока карточек для разных категорий:
   - `card-product`
   - `card-article`
   - `card-user`

Итак, если у вас есть три блока с карточками, каждый из которых отображает различные типы контента, вы можете применять следующие имена:

- Блоки:
  - `card-product`
  - `card-article`
  - `card-user`

- Элементы для `card-product`:
  - `card-product__title`
  - `card-product__image`
  - `card-product__price`

- Модификаторы для `card-product`:
  - `card-product--discounted` — карточка со скидкой
  - `card-product--featured` — специальная карточка товара

Следуя этим правилам, вы сможете создать чистую, понятную и легко поддерживаемую структуру CSS-классов, которая облегчает работу с кодом в будущем.

На самом деле, во всех рядах разные карточки по смыслу, а значит и называть их лучше по смыслу. 
 Например: service-description-card, service-offer-card, team-card. И для каждой карточки уже применять свои стили. 
 Если вы icons-wrap собираетесь использовать в разных местах с такими же стилями, то в блоке есть смысл. Иначе достаточно этот узел сделать просто элементом team-card__social-icons. 
 Вместо team-icon я бы назвал social-icon, т. к. такие ссылки-иконки на соц. ресурсы обычно на сайте могут быть в нескольких местах.