Использование запроса для макета в отличие от использования CSS для макета

Question

Мне известно о том, что макет и функция сайта должны быть строго разделены. Макет должен выполняться с помощью CSS, а функции сайта, такие как расширение мобильного меню при нажатии, должны выполняться с помощью JS. Код: 1. & 2.

То, что я часто вижу, для реагирующих макетов имеет классы столбцов для различных медиа-запросов, где просто имя класса отличается, однако значения ширины идентичны.

Это приводит тогда к HTML в виде

<div class="container small-query-columns-4 medium-query-columns-6 large-query-columns-12><p>Responsive paragraph..</p></div>. 

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

Я знаю, что это разрушает вышеупомянутое разделение от макета (CSS) и функции (JS), хотя это будет означать гораздо более чистый HTML, и это для каждого медиа-запроса плюс намного меньше CSS. Запросить также вызовы один раз на медиа-запрос, так что попадание на загружаемую сумму также будет намного меньше с минимальным CSS-файлом. Да, конечно, это означает, что сайт зависит от JS.

Answer 1

Это неплохая идея, но я думаю, что это тоже не очень хорошая идея. Я думал о чем-то подобном несколько недель назад. Я хотел сделать CSS, который будет скомпилирован в браузере через JS в нескольких циклах, а затем добавлен в раздел главы. Но после глубокого размышления я решил не делать этого.

Я знаю, что вы можете делать резервные копии и некоторые причудливые вещи, поэтому он работает в каждом браузере с js или без него, но я посмотрел на свою сетку. Он занимает менее 10 КБ. Это интересная идея, но это не так много, как нужно. Сохраните свой HTML-код, и вы не столкнетесь с проблемой слишком большого количества классов CSS. Вы должны позволить кому-то, кто использует вашу «фреймворк», определить ширину в определенных точках прерывания. Самое простое - просто написать имя класса.

Учтите, что, когда вы используете, например, бутстрап и хотите иметь 12 столбцов на мобильном телефоне, вы просто не определяете его, и он автоматически попадает в эту ширину. Много раз это было достаточно, чтобы определить max 2 точки останова с классами css.

Когда я думаю об enquirejs, я думаю, что он может использоваться, например, для скрытия ползунков на мобильных устройствах. Когда вы просто показываете: ни один из них не работает и не меняет классы. Если у вас есть что-то похожее, что нужно удалить, потому что мобильное устройство не является хорошей средой для запуска чего-либо, вы можете отключить его, используя запрос. Другим примером является mansory grid, которую вы можете запустить и отключить с помощью enquirejs.

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