CSSのスタイルを上書きするのは悪いですか?

時には、できるだけ少ない行でCSSスタイルシートを作成しようとします。

この例を見てみましょう:

Note: Previously borders where all width:1px, border-style:solid and border-color:#000


Scenario: We want to change:

  • the width of: R, L and B to 0px
  • the border-color of: T to #ddd

使用されたコード:

border:0 solid #ddd;
border-top-width:1px;

上記のコードは何を不必要にしましたか:

  • border-color を次のように変更します:R、L、B(3つのアクション)
  • を変更する:T(1アクション)

不要なアクションが0のコードは次のとおりです:

border-right-width:0;
border-bottom-width:0;
border-left-width:0;
border-top-color:#ddd;

The question is: should we sacrifice efficiency for less-code/readability?

4
@ greg0ire、私は、私はどのようにそれをテストするか分からない
追加された 著者 ajax333221,
パフォーマンスの差を測定しましたか?
追加された 著者 greg0ire,
CSSファイルの効率性はそれほど重要ではありません:CSSファイルをレンダリングするよりも、レンダリングするよりも時間がかかります(Internet Explorerを使用している場合を除きます)
追加された 著者 JCOC611,

5 答え

可能であれば、効率の損失は測定できません。

常に読みやすいコードを書く方が良いです。

そして最後に、最初の例のファイルサイズが小さくなるので、CSSをダウンロードする方が速いです。

6
追加された

私は間違った質問をしていると思います。あなたが提供したサンプルは、ダウンロード時間とページのレンダリングにかかる​​時間との間に大きな違いは生じません。私は、Web開発者の主な焦点は、コードを少なくとも自分自身や、できれば他の人にも読みやすくすることにあるべきだと思います。

私はこれをしたでしょう:

border-width: 1px 0 0 0;
border-style: solid; /* may not be necessary as many browsers use this as default */
border-top-color: #DDD;

それは短く、ディスプレイがどんなものであるかについてあまり秘密ではなく、何も不要なことをしません。

1
追加された
私はショートハンドがボーダー幅に適用できることを知らなかった、私はそれは "私たちはすべて毎日何かを学ぶ"と思う:)
追加された 著者 ajax333221,

私の意見では、 CSSの書き換えはCSSの一部です

効率性については、2つの間に測定可能な差異(ダウンロード時間を除いて)が気づかないと思います。

What is important is to be consistent, and make your code readable.

あなたの例として、私はやっただろう:

border:none;
border-top:1px solid #ddd;

単にそれがより読みやすくなると思うからです

1
追加された
私はそれをやっているその方法を知らなかった、それは面白いです
追加された 著者 ajax333221,
正直なところ、CSSに着目すると、「私の古いボーダーを取り除きたいが、上のボーダーが欲しい」と思っていることを書いて、ちょうどそれをやりなさい... CSSがネストした何かを正しく配置するdiv;)
追加された 著者 Tomas,

コード/読みやすくするために効率を犠牲にする必要がありますか?

はい!効率を上げたい場合は、コードを圧縮することができますが、完全に読みやすく、変更しやすく、クリアしてポイント、ソースバージョン。


また、インラインスタイルをゼロするのが通常です。単なる要素の場合は、 id を付けてCSSファイルにスタイルを入れます。

1
追加された
@druciferreブラウザがコードを解凍するかどうか分からない
追加された 著者 ajax333221,
私は、コードを圧縮すると、コードを圧縮解除するためにブラウザがより多くの処理を行わなければならないため、効率が低下すると考えられます。
追加された 著者 Drew Chapin,
@ ajax333221では、HTML/CSSに対して行われるすべての圧縮は、事実上JavaScriptで行う必要があります。だから、他の何かを知っていなければ?
追加された 著者 Drew Chapin,
@FakeRainBrigand、私は "効率"という言葉を引用するための私の推論をより明らかにすべきだった。これを行うことによって、私は異なる人々が効率がどのように異なるかを示唆しています。私の意見では、ほとんどの人がブロードバンドを持っているので、コードをダウンロードした後にページをレンダリングするのにかかる時間が重要であり、ページのコードを取得するのにはほとんど時間がかかりません。
追加された 著者 Drew Chapin,
@FakeRainBrigand、申し訳ありませんが、私は反対する必要があります。それは圧縮ではありません。それは単にCSSがとにかく気にしない空白を削除するだけです。私たちはこれを少し話題にしているかもしれませんか?これをチャットに移動する必要がありますか?
追加された 著者 Drew Chapin,
@druciferre、それは圧縮方法に依存します。いくつかは送信時間を優先し、他の時間は解析時間を優先します。その両方の間に助けを捧げるものもあります。
追加された 著者 FakeRainBrigand,
@druciferre、yuiで圧縮の例を行いました。 CSSはここの別の質問に由来しています。上の方の前の部分と下の部分を参照してください。これは圧縮されたCSSです。
追加された 著者 FakeRainBrigand,
追加された 著者 FakeRainBrigand,

圧縮に関しては、著者が何を意味しているのか分からないが、コードを細かくすると、相手側のブラウザは、われわれが望むように、それを読むことを「解除」しないだろう。とにかく空のスペースが無視され、そこになければ、おそらく解析のスピードを上げます...

0
追加された