Войти с помощью github
Форум /

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

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

Как быть в случае, если, к примеру, нам необходимо сделать адаптивность, скажем, на ширине <=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

Что скажете?