Для чего делают ховеры на js?

Question

[yarnstart]

пример - любой файл на яндекс диск например

ссылка

https://yadi.sk/d/L8bOPn7O3AV9Js

Скриншот

При ховере на кнопку "Сохранить на яндекс.диск" , на неё вешается класс "button2_hovered_yes" и через него меняется бэкграунд на псевдоэлементе before, почему сделанно имеено так, а не на css ? Если бы это не был яндекс, можно было бы списать всё на разработчика, но в данном случае, предположу, причина иная.

Comments

[Владимир Проскурин]

Они как раз недавно писали про React+BEM. Спросил у них https://habr.com/ru/company/yandex/blog/438598/#co...

[yarnstart]

Владимир Проскурин, да, видел эту статью вчера, спасибо за ваш комментарий на хабре, надеюсь на него кто-нибудь ответит, буду ждать

[Rustam Bainazarov]

Например, когда при наведении на элемент, нужно выделить элемент, который не является либо ребёнком, либо соседом в одном уровне вложенности.

Когда нужно сделать зависимые события или сложные интеракции (например, ripple-эффект кнопок Material Design'а).

[nvdfxx]

SmthTo, тут просто фон у псевдоэлемента меняется

Answer 1

[Сергей delphinpro]

Можете не искать подвоха, его нет. Всё очень просто и прозаично — это их родной БЭМ в его чистейшей интерпретации. Они же используют полный стек БЭМа, а не только нотацию имен классов. Любой стиль определяется только классом. Каждый компонент лежит в отдельной папке, внутри js/css/img, стили разбиты еще на файлы — стили блока/элемента/модификатора в отдельных файлах. Всё это собирается чудо-машиной БЭМ.js.

Comments

[Владимир Проскурин]

в его чистейшей интерпретации

Если бы это было так, то там не было бы кучи каскадов

.file-menu-pane .menu__text {
    display: inline-block
}

Кучи других :hover, всякие :empty.

Сотрудники из mail и yandex дали некоторое объяснение этому https://habr.com/ru/company/yandex/blog/438598/#co...

[Сергей delphinpro]

Владимир Проскурин, ну они то же самое написали — Его Величество БЭМ =)
Когда блоки определяются в bem-json это удобнее, потому что полностью вписывается в идеологию бэма.

[yarnstart]

Только непонятно почему конкретно на этой странице все ховеры через js, а на главной https://disk.yandex.ru/ или https://yandex.ru/ через классический :hover ?

[Сергей delphinpro]

eugenekazakov, тонны причин. может быть не впадают в крайности, делают так, как удобнее в конкретных обстоятельствах, может немного по разному настроен процесс сборки, может легаси осталось, может …

Answer 2

[Froggyweb]

Ну на мобильниках нет ховера - это главный вариант, а состояние кнопки нужно
БЭМ опять таки.... стили то - не главное, если js сказал ishovered, сss ответил - есть. т.е. в цсс просто прописывается состояние

Comments

[Владимир Проскурин]

На мобилках не нужен ховер, там есть :active. К тому же, я проверил, на мобилках там нет эффекта ховера на кнопке.

[Froggyweb]

Владимир Проскурин, там есть :focus activ - 'процесс нажатия, но не суть.
речь не о самом ховере а о состоянии на разных устройствах вот и подставляют стили, а когда состояние возникает - это другой вопрос.

[Владимир Проскурин]

Froggyweb, первый раз такое слышу. Если устройство умеет "наводить" мышкой, то оно будет вызывать :hover обязательно, если срабатывает mousemove на элементе, то и hover будет. Мне кажется, тут что-то сложнее или специфичнее.

[Froggyweb]

блин. неважно есть мышка или нет.
просто название созвучно с событиями мыши. Может быть isCool-yes просто этим они обозначают что вид элемента зависит от каких то факторов.
Остальные стили - статичны.

зы button2_hovered_no как реализовать мышкой и css?

[Владимир Проскурин]

Froggyweb, я спорю о том, что зачем устанавливать класс, допустим .hover, и применять на него стиль, если есть :hover. Пока это выглядит тупо как костыль по незнанию. Нет повода так делать. Если нужно отслеживать наведение, зачем трогать классы? Следили бы спокойно, и оставили :hover.

зы button2_hovered_no как реализовать мышкой и css?

Зачем ставить такой класс по наведению? Вот в чем суть вопроса. Ставить просто так, чтобы было - глупо. Это либо костыль, либо специфичные механизмы.

[napa3um]

Владимир Проскурин, в совеременной фронтенд-разработке не пишут на CSS и HTML, считай эту "неоптимальность" издержками проецирования состояния клиента на DOM в конкретном фреймворке (в данном случае, как уже заметили - BEM).

[Rustam Bainazarov]

Froggyweb, можно использовать медиа-запросы @pointer: coarse/fine или @hover: none/hover для определения сенсорного экрана или полноценной поддержки :hover'a :))

[Froggyweb]

Зачем ставить такой класс по наведению? Вот в чем суть вопроса. Ставить просто так, чтобы было - глупо. Это либо костыль, либо специфичные механизмы

Владимир Проскурин, ..... нет слов.
Во первых такой класс может ставится как при наведении так и при фокусе на вон тот инпут. по-моему мы говорим на разных языках

[Владимир Проскурин]

Froggyweb, я не понимаю, чего вы от меня хотите. Главный вопрос у меня в том, что они вместо использования :focus ставят модификатор focused_yes, вместо :hover ставят hovered_yes. Вы мне говорите про button2_hovered_no, хотя там такого нет. Конкретно на той странице, нет ничего такого, что заставило бы вместо использования стандартных селекторов, создавать классы. В посте на хабре уже ответили, это i-bem, без весомых причин.

Answer 3

[Alibek Kulseitov]

Мне кажется никто не даст тебе ответа)
У них могут быть много причин разных на это, которых мы не узнаем. Но возможно для статистики или чего-то еще

Answer 4

[WapSter]

Яндекс огромен, и они все соки высасывают из своей же методологии БЭМ. Цепляют модификаторы, так как обычный ховер не умеет изменять классы. А так различные причины могут быть, прицепить класс одна из них.

Answer 5

[yarnstart]

Ответы с хабра здесь - https://habr.com/ru/company/yandex/blog/438598/#co...