CSS Методологии

CSS методологии помогают писать сопровождаем CSS. Сопровождаемый значит:

• читаемый - можно быстро найти и понять какие стили за сто отвечают
• легко изменяемый - простые изменение просто внести
• надежный - изменения в свойствах не приводят к неожиданным проблемам на UI

BEM

BEM - самая широко-используемая методология на 2020 год. Block, Element, Modifier - из таких частей состоит название класса .block__element--modifier. Блок (или компонент) - повторно используемая часть или просто самодостаточная часть HTML разметки. Ограничивая область применения класса одним блоком мы решаем проблему наложения стилей и достигаем их изоляции без использования Webpack. Из минусов можно выделить загруженность HTML блоков/компонентов однообразными классами.

<!-- Блок `search-form` имеет булевый модификатор `focused` -->

<form class="search-form search-form_focused">

<input class="search-form__input">

<!-- Элемент `button` имеет булевый модификатор `disabled` -->

<button class="search-form__button search-form__button_disabled">Найти</button>

</form>

Atomic CSS

Чаше используется дизайнерами или UI редакторами для создания готовых макетов. За каждое свойство отвечает свой CSS класс. Нужный вид элемента, как из конструктора, собирается из подходящих классов.