Виталий Першин

Запускаю эмулятор macOS на VMware Workstation Pro и вперед

clip-path и calc



Генератор clip-path https://bennettfeely.com/clippy/

У вас инициализация слайдера идет очень поздно, а картинка у вас принимает высоту контейнера в котором находиться, таким образом её распирает на пол экрана. А когда у вас подключается слайдер, в нем появляются классы на которые завязан ваш ксс:

.slick-slide img {
    margin-top: 25px;
    width: 80%;
    display: block;
    padding-left: 70px;
}

Это неправильный подход. Пока не подключиться слайдер, не подключаться и ваши стили.. Вы либо пропишите стиль на саму картинку либо привяжитесь к чему-то статическому, хотя бы к контейнеру слайдера классу slider на который вы привязали слик. А вообще почитайте про БЭМ и таких проблем у вас никогда не будет.

у слик слайдера есть опция variableWidth: true

Пример инициализации из документации:

$('.variable-width').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true
});

Кроме того если слайдер в модальном окне, его может глючить при открытии окна, поэтому после открытия окна можно обновить позицию слайдера $(".variable-width").slick('setPosition');

Да, по БЭМ, без дизайна больше не скажешь.
Единственное что, я бы точно заменил promo__text например на promo__content

Ankhena,

Но кнопка это блок.

Не обязательно, если кроме контекста блока она нигде не будет использоваться.

Картинке не нужна обертка (разве что picture).

Все зависит от ситуации, вообще в БЭМ методологии обертки достаточно хорошая практика.

А promo__bg вообще не html тег, это либо псевдоэлемент либо просто фон.

При чем тут тег? Если это фон и возможно он будет анимироваться каким-то образом или вообще там будет динамический фон, то вполне не плохое решение.

div:nth-child(6n-5),
div:nth-child(6n-4)

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

Как по мне это абсолютно бесполезные миксы:

<div class="container  page-header__container">
<div class="row  page-header__row">

Там всего пара свойств, зачем их переопределять, создайте свои блоки по БЭМ с нужными вам свойствами, в данном случае достаточно просто убрать container и row

Вот это вообще не микс:
logo page-header__col-logo
либо так: page-header__logo
либо с модификатором ключ-значение: page-header__logo page-header__col_type_logo

Меню и мейл почти тоже самое:
либо page-header__main-nav
либо все же если акцент на col, то пара ключ-значение: page-header__col page-header__col_type_menu, а еще лучше абстрактно page-header__col_size_small смотря какие стили собираетесь вешать...

В общем даже в таком коде можно определить для себя какой-то единый стандарт, а у вас все перемешано вопреки методологии..

У вас на body стоит min-width: 1200px;

Можно запустить только без звука

<video id="video_background" preload="auto" no-controls autoplay loop playsinline muted >
      <source src="video/bt-1400.mp4" type='video/mp4' />
    </video>

Используйте 100% ширину и максимальную:

width: '100%',
maxWidth: 900

При размере больше 900 ваше окно будет всегда 900, а при размере меньше 900, будет сжиматься и занимать 100% ширины экрана

Используйте технологию flexbox и разделяйте блоки на составные части:

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

В шаблоне короткой новости добавляем в нужном месте:

[xfgiven_имяДопПоля]
style="background: [xfvalue_имяДопПоля];
[/xfgiven_имяДопПоля]

В дополнительное поле к каждой новости соответственно прописываем, только значение к свойству background

Должно получиться что-то вроде этого:

<div class="new" [xfgiven_имяДопПоля]style="background: [xfvalue_имяДопПоля];[/xfgiven_имяДопПоля]><a href="#"></a></div>

В случае если поле не заполнено, то ничего выводиться не будет

Но правильнее будет задавать стили через классы, аналогичным образом.

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

Первое это анонимная функция, которая вызывает сама себя, но полный код выглядит вот так:

(function() {
    // Тут какой-то код
})();

Данная функция выполнится сразу же как будет обнаружена.

А вторая, это более продвинутая $(document).ready... библиотеки jQuery

Противоречиво... С одной стороны, если вы не собираетесь это нигде переиспользовать, то можно смириться.
С другой стороны методология БЭМ как раз и нужна для того чтобы поделить сайт на части и вставлять их в любое место. Зачем объявлять блок footer-column, если он все равно по именованию является элементом footer. В данном контексте footer-column можно называть footer__column, footer-column__title можно назвать footer__title и т.д.. так как они все равно завязаны на footer. Вот если вы footer-column назовете например box то вы по всем правилам объявите независимый блок и сможете его использовать в любом месте сайта и вложенные в него элементы типа box__nav, box__item, box__url. А примиксовав к нему footer__box вы сможете задать значения зависимые от окружения

transform: scale(1.1); на hover