9

私はかなり大規模なプロジェクトを開始しており、CSS の前処理に LESS を使用するオプションを検討しています。

LESS の便利な点は、たとえば以下を含む mixin を定義できることです。

.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -o-border-radius: @radius;
    -ms-border-radius: @radius;
    border-radius: @radius;
}

そして、それをクラス宣言で次のように使用します

.rounded-div {
   .border-radius(10px);
}

出力CSSを次のように取得します。

.rounded-div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

これは、ブラウザのプレフィックスの場合に非常に役立ちます。ただし、これと同じ概念を使用して、一般的に使用される css をカプセル化できます。たとえば、次のようになります。

.column-container {
    overflow: hidden;
    display: block;
    width: 100%;
}
.column(@width) {
    float: left;
    width: @width;
}

そして、デザインで列が必要なときはいつでもこの mixin を使用します。

.my-column-outer {
    .column-container();
    background: red;
}
.my-column-inner {
    .column(50%);
    font-color: yellow;
}

(もちろん、プリプロセッサを使用すると、これを簡単に拡張してさらに便利にすることができます。たとえば、列の数とコンテナーの幅を変数として渡し、列の数とコンテナーの幅に応じて LESS が各列の幅を決定するようにします! )

これに関する問題は、コンパイルすると、最終的な css ファイルに 100 個のそのような宣言があり、コピーして貼り付けると、ファイルが巨大で肥大化して繰り返しになることです。これに代わる方法は、列レイアウト オプションごとに事前定義されたクラスを持つグリッド システムを使用することです。 c-25 を使用して、2 列、3 列、4 列のレイアウトに対応し、これらのクラスを私の dom に使用します。

私は余分なクラスのアイデアが本当に嫌いです.経験から、それはDOMの肥大化につながります（グリッドクラスをアタッチするためだけに余分なdivを作成します）。また、html/css の最も基本的なチュートリアルでは、DOM をスタイリングから分離する必要があることがわかります。グリッド クラスはスタイリングに関連しています。私にとっては、上記の .rounded-div の例に「border-radius-10」クラスを追加するのと同じです!

一方で、コードの繰り返しによって css ファイルが大きくなることも欠点です。

私の質問は、どれをお勧めし、どちらを使用していますか?

また、最適化に最適なソリューションはどれですか? ファイルサイズが大きいことは別として、ブラウザが複数のクラスを大きなcssファイルよりも高速にレンダリングするかどうか、またはその逆かどうかについての研究はありますか?

ご意見をお待ちしております。

4

1 に答える 1

1

私の見解では、JS を使用してクライアント側で LESS をコンパイルすると、パフォーマンスが低下する可能性があり、ブラウザに余分な負荷がかかります。ただし、サーバーでコンパイルできる場合、Web サーバーは gzip してクライアントに転送できます。
とにかく、個人的にはサーバー側でのコンパイルを好みます。理由は次のとおりです。

  1. 最新でないブラウザーでのパフォーマンス JS LESS コンパイラーは信頼できません
  2. 各ブラウザは独自の出力を持つことができるため、クライアント側のコンパイラの機能を信頼することさえできません。一方で、サーバー側のコンパイル ジョブに頼ることができます。
于 2012-06-08T18:53:07.380 に答える