Я начал использовать методологию BEM при написании моего CSS, и было несколько случаев, когда я изо всех сил старался найти лучший способ сделать что-то конкретное.
Я хотел бы рассмотреть простой пример панели.
Предположим, что я пишу компонентный компонент CSS с использованием стиля BEM. Поэтому мой CSS может выглядеть следующим образом:
.panel {}
.panel__titlebar {}
.panel__content { display: none; }
Панель может быть либо бесцветной, либо хромированной. Поэтому я определяю еще один класс модификатора для панели:
.panel--with-chrome {
border: 4px solid black;
border-radius: 4px;
}
Теперь скажем, панель может находиться в полноэкранном/максимизированном состоянии, в котором исчезают хром и заголовок. Вместо определения модификаторов для панели и заголовка было бы разумно определить модификатор только на родительском (например, на панели - полноэкранный), и элементы отдыха должны соответственно измениться. Итак, теперь мой CSS становится:
.panel--fullscreen {
/* something has to be done here */
}
.panel--fullscreen .panel__titlebar { display: none; }
Чтобы удалить хром в полноэкранном режиме, я могу либо:
-
переключить класс - с-хром в JS вместе со панелью - полноэкранный класс
-
перезаписать хром CSS внутри класса - полноэкранного.
Во-первых, это не хорошо, потому что в идеале я хотел бы просто переключить только один класс (.panel - fullscreen) в JS для переключения полноэкранного режима.
И второй плохой, потому что мне придется перезаписать предыдущий CSS, что является плохой практикой.
Так что лучший способ сделать это? Цените свои комментарии.
Спасибо
