レイアウトにCSSを使用するのとは対照的に、レイアウトに対してInquireを使用する

Question

私は、サイトのレイアウトと機能を厳密に分離する必要があることを認識しています。レイアウトはCSSを使用して行う必要があり、クリックでモバイルメニューを展開するなど、サイトの機能はJSで行う必要があります。 リファレンス：1。 & 2。

レスポンシブなレイアウトでよく見られるのは、さまざまなメディアクエリの列クラスですが、クラス名が異なるだけですが、幅の値は同じです。これは、その後、

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

の形でHTMLにつながる

は、それは常にだけで、最小限のCSSグリッド、列クラスを作るために、様々なメディアクエリの列に同じ幅を定義するのではなく、に受け入れられるだろう幅はと定義され、Inquireでこれらのメディアクエリを動的に渡しますか？

レイアウト（CSS）と機能（JS）から分離した上記の遺跡を知っていますが、それはもっとクリーンなHTMLを意味します。また、メディアクエリごとに一度だけ呼び出すようにすると、ダウンロードする量のヒットも最小限のCSSファイルではるかに少なくなります。はい、もちろん、これはサイトがJSに依存していることを意味します。

Answer 1

それは悪い考えではありませんが、私はそれも良い考えではないと思います。私は数週間前に似たようなことを考えました。私はいくつかのループでJSを介してブラウザでコンパイルされるCSSを作りたいと思っていました。しかし、深い考えの後、私はそれをしないことに決めました。

フォールバックとファンシーなものを作ることができるので、jsの有無にかかわらずすべてのブラウザで動作しますが、私はグリッドを見ています。それは10KB以下です。面白い考えですが、それはそれが取るように多くの仕事をworhではありません。あなたのHTMLを整理しておくと、CSSのクラスが多すぎて問題に陥ることはありません。あなたはあなたの "フレームワーク"を使う人が特定のブレークポイントで幅を定義できるようにする必要があります。最も簡単なことはクラス名を書くことだけです。

たとえば、ブートストラップを使用してモバイルに12列を追加する場合は、定義しないで自動的にその幅に収まることを考慮してください。多くの場合、CSSクラスで最大2つのブレークポイントを定義するだけで十分です。

私はenquirejsについて考えるとき、私はそれがモバイル上のスライダーを隠すために使用できると思います。何も表示していないときは、まだ実行中でクラスを変更しています。モバイルが何かを実行するための良い環境ではないため、何を削除すべきかが似ている場合は、inquireを使用してモバイルを無効にすることができます。もう1つの例はmansoryグリッドです。enquirejを使用して起動したり無効にしたりすることができます。

基本的には、js依存のものがあり、それを別の画面でカスタマイズしたい場合や、異なる動作を指定する場合に使用できます。ウィンドウロードやドキュメントロード時に何かを設定すると、誰が窓をサイズ変更するか。ここでそれを使うことができます。