i

{
  "openapi": "3.0.0",
  "info": {
    "version": "1.0.0",
    "title": "Swagger Sample"
  },
  "components": {
    "securitySchemes": {
      "cookieAuth": {
        "type": "apiKey",
        "in": "cookie",
        "name": "token"
      },
      "cookieSession": {
        "type": "apiKey",
        "in": "cookie",
        "name": "session_id"
      }
    }
  },
  "security": [
    {
      "cookieSession": []
    },
    {
      "cookieAuth": []
    }
  ],
  "servers": [
    {
      "url": "https://jsonplaceholder.typicode.com"
    }
  ],
  "paths": {
    "/posts": {
      "get": {
        "description": "Returns a list of posts.",
        "responses": {
          "200": {
            "description": "OK"
          }
        }
      }
    }
  }
}

2005 год... Классам блоков мы добавили префиксы (b-, c-, g-), чтобы отличать их от внутренних классов...

Исторически они появились в переходный период для того, чтобы отличать новый код, написаный по БЭМ, от старого. Со временем мы от них отказались.

Иногда к именам блоков могут добавляться различные префиксы.

Часто слышу, как разработчики говорят «БЭМ не нужен, ведь есть CSS-модули». Это не так.

Корень этого заблуждения кроется в том, что люди воспринимают БЭМ как CSS-методологию. На самом деле БЭМ это набор универсальных принципов, которые можно применять независимо от используемых технологий, будь то CSS, Sass, HTML, JavaScript или React. БЭМ решает множество задач, в число которых входят именование CSS-классов, подход к разделению интерфейса на независимые части и изоляция стилей для этих независимых частей.

CSS-модули это инструмент, который решает только проблему изоляции стилей. Все остальные проблемы остаются нерешёнными: вам всё ещё нужны какие-то правила для разделения интерфейса на независимые части и всё ещё нужно придумывать названия классов. Поэтому CSS-модули можно и нужно применять вместе с БЭМом.

Эволюция выглядит так:

/* Классический БЭМ с длинными именами классов для обеспечения изоляции */

.shop-cart-button {}
.shop-cart-button_size_small {}
.shop-cart-button_size_large {}


/* CSS-модули с неограниченной свободой творчества в именах классов */

.button {}
.small {}
.large {}
/* или */
.button {}
.is-small {}
.is-large {}
/* или */
.button {}
.size-small {}
.size-large {}


/* БЭМ и CSS-модули */

.button {}
.button_size_small {}
.button_size_large {}

Сразу отвечу на вопрос «а чем плох пример с классами .button, .small и .large?». Он плох тем, что классы .small и .large сами по себе не несут информации о том, к чему они относятся. Нельзя понять, стилизуют ли они отдельный элемент или описывают состояние существующего элемента. Также такие названия классов рано или поздно снова приведут вас к проблеме уникальности имён. Например, вы пишете стили для модального окна. Вам нужно стилизовать полупрозрачный оверлей поверх страницы и само модальное окно. Оба этих элемента могут быть в двух состояниях: виден или скрыт. Кажется, что класс .visible отлично подходит, но проблема в том, что для оверлея и для окна этот класс должен содержать разные стили. Можно придумать костыль в виде селекторов .overlay.visible и .window.visible, но это именно костыль, потому что вы увеличиваете специфичность. С БЭМом всё просто и без ненужного роста специфичности: .overlay_visible и .window_visible.

...стилизовать немножко иначе...

1. положение — определяем во внешнем окружении т.е. сделать стиль блока зависимым от другого блока;
   
2. геометрия, цвет и размеры — должно определятся в самом блоке, вариативность реализуется модификатором, но в зависимости от масштаба вариативности и здравого смысла тоже может быть определятся в другого блоке (в случае применения методологии такую специфичность легко отслеживать), если вариативность уникальная, сделать стиль блока зависимым от другого блока;
   
3. типографика — сделать стиль блока зависимым от другого блока.
   

• Зачем внешнюю геометрию и позиционирование задават...
  
• Внешняя геометрия и позиционирование
  

• https://github.com/getbem/getbem.com
  
• https://ru.bem.info/built-with-b/
  
• https://github.com/mishanga/bem-vcard
  
• https://github.com/alfa-laboratory/arui-feather
  
• https://github.com/getbem/getbem.com
  
• https://github.com/alexbaumgertner/hunter-boat