Как перейти на CSS по БЭМ

Чтобы реализовать принципы БЭМ в проекте, необходимо:

• абстрагироваться от DOM-модели и научиться создавать блоки;
• не использовать ID-селекторы и селекторы тегов;
• минимизировать количество вложенных селекторов;
• использовать соглашение по именованию CSS-классов, чтобы избежать коллизии имен и сделать имена селекторов максимально информативными и понятными;
• работать в единых терминах блоков, элементов и модификаторов;
• выносить в модификаторы CSS-свойства блока, изменение которых кажется вероятным;
• использовать миксы;
• разделять код на мелкие независимые части для удобства работы с отдельными блоками;
• повторно использовать блоки.

Как начать реализовывать идеи БЭМ в существующем проекте

• Создавайте новые компоненты по БЭМ, а старые изменяйте по мере необходимости.
• Проектируйте блоки, руководствуясь принципами, описанными выше.
• Используйте префиксы в именах CSS-классов (например, bem-), чтобы отличить новый код от старого.