Можете пожалуйста дать свое видение best practice так сказать.
<div class="contacts">
<div class="contacts__heading heading"></div>
<div class="contacts__list">
<div class="contacts__contact contact">
<div class="contact__ico contact__ico_mr"></div>
<div class="contact__content"></div>
</div>
<div class="contacts__contact contact">
<div class="contact__ico contact__ico_mr"></div>
<div class="contact__content"></div>
</div>
<div class="contacts__contact contact">
<div class="contact__ico contact__ico_mr"></div>
<div class="contact__content"></div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer__contact-list">
<div class="footer__contact contact">
<div class="contact__content contact__content_light"></div>
<div class="contact__ico contact__ico_size_small contact__ico_ml_small"></div>
</div>
<div class="footer__contact contact">
<div class="contact__content contact__content_light"></div>
<div class="contact__ico contact__ico_size_small contact__ico_ml_small"></div>
</div>
<div class="footer__contact contact">
<div class="contact__content contact__content_light"></div>
<div class="contact__ico contact__ico_size_small contact__ico_ml_small"></div>
</div>
</div>
</footer>
Ну понятное дело, что в хэдере у меня header-contacts, а в футере footer-contacts был бы.
Можете, пожалуйста, привести пример в котором данный каскад от модификатора может аукнуться.
2) Можно делать кучу модификаторов для каждого элемента в отдельности, но тогда страшно представить сколько в проекте будет модификаторов, большинство из которых будет использоваться только 1 раз.
header-contacts__img, но по сути это одно и то же, что и header__contacts-img
А каскад по сути инкапсулирован в самом блоке и никому не мешает.
хотя класса slick-center на них нет.
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
centerMode: true
}).on('afterChange', function(e, slick) {
$('.item').removeClass('jump');
});
$('body').on('click', '.slick-current', function(event) {
event.preventDefault();
$(this).addClass('jump');
});
$('.portfolio__btn_1').on('click', function() {
$('.portfolio__popup_1').fadeIn(200);
$('body').addClass('no-scroll');
$(".popup__slider").slick('setPosition');
})
})
И?