0

外部 CSS 割り当てには 2 つの方法があります。私は最初の方法を使用しています。ほとんどの Web サイトは 2 番目の方法を使用します。やり方が悪いのかしら！

最初の方法:

ほぼすべての CSS ルールのクラスを作成し、どこでも使用できます。

<div class="f_left d_iblock">
   <span class="w_100 f_left">blah blah</span>
</div>


.f_left{
    float:left;
}
.f_right{
    float:right;
}
.d_block{
    display:block;
}
.w_100{
    width:100%;
}

....
....

2 番目の方法:

要素ごとに CSS ルールを作成します。

<div id="container">
   <span>blah blah</span>
</div>


#container{
   float:left;
   display:inline-block;
}

#container span{
   width:100%;
   float:left;
   font-weight:bold;
}

一般的に、私は最初の方法を使用しています。この方法を選択しているのは、次のことが得られるからです。

  • css ファイルが小さいほど、読み込み時間が短くなります。
  • 再利用可能な CSS ルール。
  • コードが明確であるため、CSS の管理は 2 番目の方法よりも簡単です。
  • id または class 属性を作成する必要はありませんが、css ルールを割り当てるだけです。したがって、各要素の名前を考える必要はありません:)
  • ブラウザは CSS ルールを高速に解釈できるため、パフォーマンスが向上すると思います。

ほとんどのサイトでは一般的にこの方法をほとんど使用していないことがわかり、パフォーマンスを向上させるために努力する必要があると考え始めていますが、css の代わりに html ファイルをバルク化し、各要素に 3 ～ 4 個の css ルール名を記述しています。

注: 私は英語をほとんど知りません。あなたが私を理解できることを願っています。簡単な文章を書いていただけると嬉しいです:)

4

2 に答える 2

0

あなたの両方の方法はまだあまり良くありません。次のように2番目のメソッドを書くことができます：

#container{
   float:left;
}

#container span{
   display:block;
   font-weight:bold;
}

しかし、プロパティごとに個別のクラスを作成するというアプローチは適切ではありません。

これらについて読む必要がある良い記事がいくつかあります

https://developers.google.com/speed/docs/best-practices/rendering

https://developer.mozilla.org/en/Writing_Efficient_CSS

更新しました

なぜあなたのアプローチが良くないのか、ほとんどのプロパティは同じですが異なる3つの要素があるとします。

例えば：

.one{
 float:left;
 font-family:"tahoma";
 font-weight:bold;
 font-size:15px;
 color:#000;
 line-height:1.5;
}
.two{
 float:left;
 font-family:"tahoma";
 font-weight:bold;
 font-size:18px;
 color:#000;
 line-height:1.5;
}
.three{
 float:left;
 font-family:"tahoma";
 font-weight:bold;
 font-size:13px;
 color:#000;
 line-height:1.5;
}

これをより良い方法で記述して、CSS ファイルのサイズを小さくすることができます。次のように書きます。

.one, .two, .three{
     float:left;
     font-family:"tahoma";
     font-weight:bold;
     font-size:15px;
     color:#000;
     line-height:1.5;
    }
    .two{
     font-size:18px;
    }
    .three{
     font-size:13px;
    }

したがって、あなたのアプローチを実行すると、各プロパティを個別に定義する必要があり、時間がかかり、重くなります。

于 2012-05-11T12:11:32.853 に答える