仕事でよく使われる効率的なCSSコード

最も一般的に使用される 4 つの選択方法は、

コンテンツの引用ボタン

などの ID ルール選択

button#button{}

#urlBar[type="text"] { }

div > p > span#demo{}

内容の引用

など)

button.toolbarButton { }

.fancyText { }

menuitem > .menu-left[checked="true"] { }

内容の引用

など)

td { }

div > p { }

input[ type= "checkbox"] { }

参照コンテンツ

などの統一セレクター

*

: after

[hidden="true"]

これらはすべて、右端から左端のルール全体の終わりまで照合を開始します。

たとえば、右端のルールによって、選択する要素がすでに決定されている可能性があります。

ルールの一致が増えると、パフォーマンスが無駄になります。

たとえば、div > p > scan#demo{}

div > p > span はまったく意味がありません。

改善:

ID は一意です。冗長なルールを追加する必要はありません。正確に合わせる事も可能です。

引用内容

button#button{} -> #button{}

#urlBar[type="text"] { } -> #urlBar{}

div > p > span#demo{} -> #demo{}

以下は表示されません<a class="toolbarButton"></a>つまり、最適化することもできます。

コンテンツ

button.toolbarButton { } -> .toolbarButton{}

、要素にクラスを直接与える方が良いでしょう。

たとえば、 div > p > span > a{} は

特別なパフォーマンスを与える可能性があります。のクラスを直接記述するだけです。

特別な状況では特別な対応が必要です。

たとえば、ページ構造がきれいであることを確認する必要がある場合があります。この方法は、後のリビジョンのニーズを満たすために使用されます。それも可能です。バランスの取れた最適なソリューションを見つけてください。

継承を使用します

#demo .left{text-align:left} ->#demo{text-align:left}

注: 元の記事で XUL が使用されているため、XUL に触れたことがない学生にとっては、タグが少し見えにくいかもしれません。奇妙ですが、理解するのは難しくありません。