• Когда использовать микс, а когда модификатор?

    Get-Web
    @Get-Web Куратор тега CSS
    SolidMike, В первую очередь нужно детально изучить макет прежде чем делать выводы, как лучше делать.

    Можете пожалуйста дать свое видение best practice так сказать.

    Я стараюсь делать блоки максимально компактными. То есть у меня может быть блок contacts, но внутри него отдельно блоки contact и основная конструкция контактов у меня может выглядеть так:

    <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>

    На первый взгляд может показаться наляписто, но такой подход делает код очень предсказуемым, я точно знаю, что если я поставлю маленький левый отступ у иконки contact__ico_ml_small он не перебьется ни чем другим, я освобождаю свою память в голове для более важных деталей, чем слежка за состоянием элементов.
    Самое важное, это сделать так чтобы переопределить стили можно было одним классом без повышения специфичности, если вам кажется что из-за этого будет много модификаторов постарайтесь придумать такой код, который позволит вам уменьшить их количество, к примеру, основной цвет текста можно наследовать от родителя(блока), а блок легко миксуется, вот вам решение как минимум одной проблемы с инверсией цвета. С появлением гридов отступы между элементами можно контролировать родителями, пока поддержка оставляет желать лучшего, но это уже можно использовать и тогда contact__ico_ml_small вообще потерет смысл это можно реализовать миксом блока.

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

    Get-Web
    @Get-Web Куратор тега CSS
    SolidMike,
    Ну понятное дело, что в хэдере у меня header-contacts, а в футере footer-contacts был бы.

    Вы немного не поняли. когда вы создаете самодостаточный блок, то давая такое название header-contacts или footer-contacts вы косвенно привязываетесь к контексту, а поскольку это блок, то он может быть и в шапке, в подвале и в сайдабаре и увидя footer-contacts в сайдбаре будет вызван некий диссонанса. То есть если вы хотите использовать блок один раз и не попасть в просак, то и используйте контекст того одного раза, а не делайте абстрактный блок, который можно пере использовать не по назначению.

    Можете, пожалуйста, привести пример в котором данный каскад от модификатора может аукнуться.

    Элементарно, необходимость модифицировать блок дальше.. Предположим вы сделали .card_type_1 .card__img и все у вас прекрасно работает "Инкапсулированно", но вот у вас появляется слайдер карточек и стиль такой же как и .card_type_1, но возможно .card__img выглядит немного иначе (к примеру меньше высоты), а все остальное точно такое же. Как решить данную проблему? По методологии для этого и нужны модификаторы, ок пишем .card__img_custom.. УПС, модификатор не будет работать как надо, необходимо повысить специфичность, теперь придется писать отдельный модификатор для модификатора... .card_type_1 .card__img_custom. А что если .card__img_custom использует стили, которые раньше не использовались и их не нужно переопределять, тогда можно не делать .card_type_1 .card__img_custom и все изменения внести в .card__img_custom, теперь у нас часть стилей в .card__img, часть в .card__img_custom и часть в .card_type_1 .card__img, и тут нам нужно внести еще немного изменений, но на этот раз уже точно нужно повысить специфичность, но использовать .card_type_1 .card__img_custom на существующем .card__img_custom уже нельзя так как часть его стилей перебивается .card_type_1 .card__img (мы так и хотели) и мы пишем 4-й модификатор с отдельными правилами для .card_type_1 .card__img_custom. И этот хаос нам принес только один единственный элемент... Догадываетесь как будет дальше? Дальше будет хуже. Такой подход инкапсулированного модификатора повышающего специфичность, дает нам возможность допускать ошибки, а если их можно допускать, то они будут.

    2) Можно делать кучу модификаторов для каждого элемента в отдельности, но тогда страшно представить сколько в проекте будет модификаторов, большинство из которых будет использоваться только 1 раз.

    Не так много как вы себе представляете. Зато это структурированное решение поддающееся логике, не надо ничего лишнего держать в голове.
  • Когда использовать микс, а когда модификатор?

    Get-Web
    @Get-Web Куратор тега CSS
    SolidMike,
    header-contacts__img, но по сути это одно и то же, что и header__contacts-img

    По сути как раз разное.. header-contacts__img в футере будет явно выделяться, в то время как header__contacts-img в любом другом месте просто не может существовать, то есть конкретика в которой сложно ошибиться. Это если придираться к словам, более абстрактное назввание микс-блока конечно вполне подойдет.

    А каскад по сути инкапсулирован в самом блоке и никому не мешает.

    Такой каскад аукнется в итоге.
  • Как анимировать активный слайд slick slider?

    Get-Web
    @Get-Web Куратор тега JavaScript
    Narally,
    хотя класса slick-center на них нет.

    slick-current, если быть точным. Вы вешаете событие на элемент, а элемент находите обращаясь к классу.
    Я все равно до конца не понимаю задачу. Вы можете просто делегировать событие:

    $('.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');
    });
  • Какое состояние у современного фриланса на конец 2020?

    Фриланс разный бывает, я вот в прошлом году в офис на мидла устроился, посидел 4 дня, понял что времени я трачу больше, работаю не в таком комфорте как дома, зп по факту та же самая, ну и ушел не задумываясь. Оптимальный вариант это удаленка, но на хорошую удаленку еще сложнее попасть..
  • Как анимировать активный слайд slick slider?

    Get-Web
    @Get-Web Куратор тега JavaScript
    Я Так до конца и не понял, что именно нужно? Зачем событие клик вешается? Ну и логика собственно в чем?
  • Как правильно подключить Slick Slider в модальном окне?

    Get-Web
    @Get-Web Куратор тега JavaScript
    Вот тут как раз и надо применить ('setPosition')
    $('.portfolio__btn_1').on('click', function() {
          $('.portfolio__popup_1').fadeIn(200);
          $('body').addClass('no-scroll');
    $(".popup__slider").slick('setPosition');
          })
       })

    Если все остальное работает корректно, то должно заработать, но такие вопросы нужно задавать со своим кодом в песочнице https://jsfiddle.net/ и не отвечать на свой вопрос, а дополнять или писать в комментарии к ответам.
  • Как сделать такую форму?

    А в чем проблема? Покажите свой код. Что вы уже пытались сделать?
  • Надёжный SSD и HDD диск?

    АртемЪ,
    И?

    И я пришел к выводу, что толерантнее надо быть, кто-то любит секс классический, а кто-то любит по гарантийкам шататься...
  • Надёжный SSD и HDD диск?

    Dmitry Roo, Это если повреждения критические. Неправильное хранение может просто сократить срок службы и через 2 года диск посыпется, этого вы никак не докажите и не предугадаете, поэтому поставщик, продавец и склады где это все храниться очень важны.
  • Надёжный SSD и HDD диск?

    Место приобретения не имеет значения

    Я бы так не сказал, у разных продавцов разные способы(места) хранения, доставки и перемещения по своей сети, поэтому товар может быть испорчен тупо из-за нарушений правил транспортировки и хранения.
  • Как сделать так что бы огненое кольцо?

    Get-Web
    @Get-Web Куратор тега CSS
    Как вариант в after effects создать анимацию и потом сделать из неё спрайт, но это не простая процедура, так что бесплатно готовое вряд ли найдется.
  • Как остановить анимацию?

    Get-Web
    @Get-Web Куратор тега CSS
    Конечно она возвращается, она же на hover срабатывает, без hover её нет.. Нужно через js класс с анимацией вешать, если хотите сохранить конечное состояние.