Как задать hover эффект для ссылок из меню сайта по методологии БЭМ?

Question

[MRcracker]

Есть код, который написан по БЭМ

<div class="header-menu">
					<ul class="header-menu__ul">
						<li class="header-menu__ul__li"><a class="header-menu__link" ref="#">Home</a></li>
						<li class="header-menu__ul__li"><a href="#">Devices</a></li>
						<li class="header-menu__ul__li"><a href="#">Delivery&Payment</a></li>
						<li class="header-menu__ul__li"><a href="#">Guarantee</a></li>
						<li class="header-menu__ul__li"><a href="#">About Us</a></li>							
					</ul>
				</div>

Как правильно добавить hover эффект при наведении для ссылок и убрать подчеркивания согласно методологии БЭМ?

Comments

[iBird Rose]

Есть код, который написан по БЭМ

учи БЭМ дальше. до hover эффекте тебе еще далеко

[MRcracker]

iBird Rose: Большое спасибо за ответ. Что бы я делал без вашего совета, а если без сарказма, то не знаете или не хотите помогать, то лучше не пишите ничего

[Ankhena]

hover это состояние и оно ничем не отличается хоть БЭМ, хоть не БЭМ

[MRcracker]

Ankhena W: подскажите, как правильно изменить этот код согласно методологии?

[Ankhena]

MRcracker: https://ru.bem.info/methodology/quick-start/

[Ankhena]

<div class="header-menu">
          <ul class="header-menu__list">
            <li class="header-menu__item"><a class="header-menu__link" href="#">Home</a></li>
            <li class="header-menu__item"><a class="header-menu__link" href="#">Devices</a></li>
            <li class="header-menu__item"><a class="header-menu__link" href="#">Delivery&Payment</a></li>
            <li class="header-menu__item"><a class="header-menu__link" href="#">Guarantee</a></li>
            <li class="header-menu__item"><a class="header-menu__link" href="#">About Us</a></li>							
          </ul>
</div>

[MRcracker]

Ankhena W: спасибо!

[MRcracker]

Ankhena W: если вам не трудно, то напишите css код какой-нибудь для hover эффекта, чтобы я понимал как это выглядит

[Ankhena]

MRcracker:
https://webref.ru/css/hover

[MRcracker]

Ankhena W: как правильно написать будет?
Первый вариант

.header-menu__link:hover {
	text-decoration: none;
}

Второй вариант

.header-menu__link a:hover {
	text-decoration: none;
}

[Ankhena]

MRcracker: ну у вас же нет ссылки внутри .header-menu__link
Да и зачем обращаться по селектору тега, если специально всем раздали классы? (Если речь про БЭМ)

[MRcracker]

Ankhena W: спасибо за ответы

[MRcracker]

Ankhena W: а если не указывать классы header-menu__link у ссылок и написать в css так, то будет не правильно?

.header-menu__item a:hover{
color: gray;
}

[Ankhena]

MRcracker:
прекрасно работать будет, даже если написать .header-menu a:hover{} и даже просто a:hover{}, но по БЭМу это не верно.

Вы чего достичь-то пытаетесь?

[MRcracker]

Ankhena W: изучаю методологию БЭМ

[Ankhena]

MRcracker: тогда ответ выше: нет, так делать нельзя. В методологии все отлично расписано. И читать там не много.

Answer 1

[cssfish]

если по уму, тут надо изучать css, а не БЭМ.