Пользуюсь dist-сборкой bem-components. Подключил себе на страницу стили с CDN и генерирую html сам.
Сейчас обнаружил, что button не меняет свое состояние по hover и click, поскольку эти стили задаются через отдельные классы а не псевдоклассы :hover
и :active
.
Почему вы их не используете? Намного проще сделать это поведение на чистом css без необходимости навешивать обработчики на javascript.
В Bootstrap так и сделано, на кнопку можно добавить класс .active
который содержит те же стили, что и :active
@just-boris кнопка может быть отключена, а значит на нее нельзя будет кликнуть, а значит hover на ней не должен работать и класс button_hovered не будет проставляться.
Все это легко решается порядком определения стилей. Если сначала написать
:hover
а затемbutton_disabled
, то вторые стили будут иметь приоритет. Кажется это даже нагляднее, чем описывать ту же логику на js@just-boris Логика реализована на JS для обеспечения консистентной реакции на любые изменения состояния блока.
Тот самый пример с
disabled
, который привел @JiLiZART, не только про визуальное состояние, но и, например, про то, что событиеclick
в принципе не должно стриггериться. Стилями эту задачу решить нельзя в принципе.Кроме того пользователю необходимо предоставить возможность подписаться на переход контрола в состояния
hovered
илиactive
, а также определить или переопределить реакцию на эти состояния на любом уровне переопределения.Да, мы не предполагаем, что контролами можно полноценно пользоваться без JS. Но, кажется, на сегодняшний день с отключенным JS не будет работать большая часть интернета и никого это не парит.
Наверное, будет полезным дать возможность дать абстракцию для подписки на состояние hover единообразно с остальными. Но это полезно только для разработчиков своих компонентов на основе стандартных.
Я смотрю на это с позиции пользователя библиотеки в поставке "какбустрап". Меня больше волнует простота подключения и использования и немного важна производительность. Сколько обработчиков событий вы навешиваете для одной кнопки?
Почему у меня нет JS. Bootstrap предусматривает возможность подключения только css, если у вас простая форма с парой текстовых полей. Это очень здорово и позволяет драмматически уменьшить размер загружаемых на страницу ресурсов.
ping. У блока link стили на hover добавляются через
:hover
. Чем он принципиально отличается, что ему можно иметь такие стили, а кнпопке – нет?