CSS Modules

Не является методологией, а является средством трансформации имен классов. Возможно использование любой методологии вместе с CSS Modules.

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

Допустим, есть файлы a.css и и b.css. В каждом есть селектор .title. В зависимости от настроек можно получить .a_title и .b_title — к исходному имени класса добавляется имя файла + подчеркивание, такой режим часто используется для разработки. Для готовой сборки можно настроить минификацию имен и получить селекторы .aypdw и .pecdq.

Таким образом, решается одна из 2 основных проблем изоляции CSS — изоляция селекторов, но необходимо контролировать вывод классов, если в разметке будет <h1 class='title'>, то работать стили не будут — имена отличаются. Поэтому, чаще всего CSS Modules используется в React-приложениях, в которых есть полный контроль за итоговой разметкой.

В CSSSR используется модифицированная версия БЭМ. Поэтому актуальны большинство правил из БЭМ.

Правила

• Не используйте префикс с именем блока у элементов. CSS Modules сами по себе обеспечивают уникальность класса

  /* Недопустимо */
  .block { ... }
  .block__element { ... }  
  
  /* Правильно */
  .block { ... }
  .element { ... }
  

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

  /* Недопустимо */
  .block { ... }
  .disabled { ... }  
  
  /* Правильно */
  .block { ... }
  .block_disabled { ... }
  

• Не используйте сomposes для управления состояниями (модификаторами). Идея composes в одном классе на элемент и состояние описывается целиком в классе. Это ухудшает удобство использования различных состояний, когда групп таких состояний несколько

  /* Недопустимо */
  .block { ... }
  .block_disabled {
    composes: block;
    /* дополнительные стили */
  }  
  /* <div class='block_disabled'> */
  
  /* Правильно */
  .block { ... }
  .block_disabled {
    /* дополнительные стили */
  }  
  /* <div class='block block_disabled'> */