Гарантия адаптивности с помощью префикса js-

[psywalker]

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

Вопрос опишу так:

Как быть в случае, если, к примеру, нам необходимо сделать адаптивность, скажем, на ширине <=500px. То есть делаем сайт адаптивным на ширине 500 и меньше. Да, я понимаю, что есть медиазапросы. Но что, если у нас, к примеру, есть навигация, в которую на ширине <=500px должны добавляться доп. пункты, а на ширине больше 500px эти доп. пункты должны убираться, и это надо делать с помощью JavaScript.

Проблема в том, что определение ширины в JS не всегда совпадает с определением ширины в CSS-медиазапросах, к примеру, в JS мы достигаем 500px, а в CSS до этой ширины ещё 1-2 пикселя, и следовательно все эти манипуляции с навигацией будут немножко (что уже критично) опережать остальную адаптивность, которая делается (и должна делаться вместе с адаптивностью навигации) с помощью CSS.

Поэтому тут выручает класс-префикс js-, который гарантирует, что, когда он появляется, то делается адаптивность в одно время.

Например, вот так вот:

.participation margin: 20px 0 30px .js-adaptive & // - вот этот класс вешается на body при <=500px margin: 10px 0 20px

Что скажете?

[vithar]

Я вообще не понял при чём тут префикс js-

[belozer]

Поддерживаю, js- вообще излишен.

Если хочется именно такой адаптивности, да ещё и в терминах БЭМ, то можно поступить как-то так:

container (к которому миксуется класс adaptive)
    menu
    content
    etc

Контейнер следит за размерами страницы и ставит примиксованному классу модификаторы.

adaptive_width_{s, x, xxl}  и т.д.

Получается, то, что ты и хотел. Но всё равно непонятно, чем медизапросы не угодили :)

[psywalker]

@belozer, спасибо вам большое! А вы не могли бы показать наглядный мини-пример где-нить на кодепине?

[belozer]

@psywalker используете i-bem?

[psywalker]

@belozer, нее, в том-то и дело, что я только учусь БЭМ-у(

[belozer]

@psywalker интересует пример на i-bem?

[psywalker]

@belozer , если можно, и на нём и не на нём)

[belozer]

@psywalker наверное самым простым для начала будет пример на VanilaJS и jQuery

// VanilaJS версия
// Ищем наш блок app
const app = document.quertSelector('.app');
window.onresize = function() {
    // В зависимости от ширины добавляем/удаляем нужный класс (модификатор) нашему блоку
    if (window.innerWidth <= 500) { 
        app.classList.add('app_adative');
        // ну и другие действия здесь можно выполнить
    } else {
        app.classList.remove('app_adative')
    }
}

// jQuery версия
const app = $('.app');
$(window).on('resize', function(){
    const win = $(this); //this = window
    if (win.width() <= 500) { 
        app.addClass('app_adative'); 
    } else { 
        app.removeClass('app_adative');
    }
});

Главное просто понять суть влияния на элементы страницы по средствам JS.

[belozer]

<div class='app'>
    <!-- Наши элементы страницы -->
</div>

[belozer]

Но всё равно непонятно, чем медиа-запросы не угодили :)

[belozer]

А в CSS ты можешь прописать что-то типо этого

.app_adaptive .my-page-elem {
  display: block;
}

.app_adaptive .my-page-elem2 {
  display: none;
}

[psywalker]

@belozer , ух ты, спасибо! А чем плохо вешать класс на body вместо контейнера?

И ещё вопрос:

Но всё равное не понятно, чем медиа-запросы не угодили :)

А мне показалось может, но как будто медиазапросы немного несовпадают со всякими window.innerWidth. Может такое быть?

Ссылка на пруф.

[belozer]

@psywalker можно и на body :) Это не сильно критично.