3

CSS のベスト プラクティスについて検索し、自分のコードを維持するためのベスト プラクティスは何かを考えていたところ、私が学んだことのほとんどすべてに反するものを読みましたが、それは google からのものでした。私は常に複数のスタイルシートを使用することを好みます。コードを維持する方が良いと思います。また、コードは、使用されないいくつかの css クラスをロードしません。

Google の開発者は、正反対のことを教えてくれます。

外部スタイルシートを可能な限り少数のファイルに結合することで、RTT を削減し、他のリソースのダウンロードを遅らせることができます。

以下は、本番環境で CSS ファイルを組み合わせる際の経験則であり、推奨されています。

  1. CSS をそれぞれ 2 つのファイルに分割します。1 つの CSS ファイルには、起動時にページをレンダリングするために必要な最小限のコードが含まれています。ページの読み込みが完了するまで不要なコードを含む 1 つの CSS ファイル。
  2. ほとんどアクセスされないコンポーネントの CSS を独自のファイルで提供します。そのコンポーネントがユーザーによって要求された場合にのみ、ファイルを提供します。
  3. キャッシュすべきでない CSS については、インライン化を検討してください。
  4. CSS ファイルから CSS @import を使用しないでください。

本当に... CSSがキャッシュされない場合、GoogleはインラインCSSを推奨しますか?? またはできるだけ少ないcssファイルを使用しますか? (確かに、すべてに css を使用するべきではありませんが、複数のスタイル シートを使用することを推奨する経験豊富な Web デザイナーを常に読んでいるので、本当に混乱しています (Google からのものでない場合は無視しますが、他の人にも役立つと思うので、stackoverflow のユーザーの意見を聞くことを考えました)。

PS:投稿した情報のアドレスはこちらです。

4

2 に答える 2

2

ページリクエストは通常​​、数バイト余分にロードするよりも時間がかかります。それがGoogleが彼らが何をするかを提案する理由です。それは確かにベストプラクティスのimoであり、私が行うことでもあります。

コードを整理するために、less（lesscss.org）のようなcssプリプロセッサの使用を検討する必要があります。このようにして、コードを別々のファイルに保存して、開発を容易にすることができます。次に、マスターlessで一連の@importステートメントを使用し、それをcssにコンパイルします。これが、ページにロードする必要がある唯一のcssファイルです。.cssファイルではなく.lessファイルを@importするようにしてください。後者では、追加のページリクエストが生成されます。

于 2013-01-18T20:07:21.320 に答える
1

コードを記述するときは、すべてを個別のスタイルシートに保持し、最後にすべてを 1 つにダンプできます。

これはモバイル ユーザー向けであるため、ページのサーバー リクエストが少なくなり、高速になります。CSS スプライトも同じ考え方で、画像コンプレッサーも利用できます。また、レスポンシブ デザインに関するさまざまな情報を入手できます。

http://www.speedawarenessmonth.com/15-things-for-making-your-site-faster-for-mobile-users/

それを簡単にするために、Less や Sass のようなツールを探しているかもしれません: /

ダウンロード: http://crunchapp.net/

于 2013-01-18T20:12:39.133 に答える