CSS ルールカスケードの適用 CSS_Experience 交換で注意すべきいくつかのポイント

理論的な基礎が必要であり、実践は理論を改善し、理解するための方法です。両方とも同じように重要です。設計者と開発者が 2 つのバランスを保てない場合、どちらの側を好むかに関係なく、左右どちらかで間違いを犯すことになります。 。しかし、私が話しているこの方法の実際の用途は何でしょうか。当然のことですが、角丸四角形を作成したり、列レイアウトを作成したり、文書の先頭に固定されたナビゲーション バーを提供したりすることはできません。このアルゴリズムの実際の応用は次のとおりです。 優れた css プログラミングの実践。これはマクロの実践であり、先ほど述べたミクロの実践と同じくらい重要ですが、習得するのははるかに困難です。

この記事は、優れた css プログラミング仕様をすべて網羅することを意図したものではありません。また、それが可能であるわけではありません。私が提供できるのは、css を記述するための個人的な仕様の概要だけです。これらの仕様はできるだけ近いものにしておきたいと考えています。 css の操作に可能です。

インライン css を使用しないでください
ユーザー スタイルはあなたの制御下にありません
重要なルールを使用しないでください
具体性に応じて css を下位から上位に記述してください
/>前 この 3 つの点は、私が話していることの焦点では​​ないので、一つずつ述べていきます。

インライン css の特殊性が最も高くなります。css ファイル内の属性がインライン css と競合する場合、css ファイル内の属性は無効になります。これは、デバッグだけを行うのとは異なります。 css ファイル内のスタイルの習慣が一致しません。インライン css も醜く、html ドキュメントにスタイルを挿入するため、放棄する必要があります。

ユーザーがユーザー スタイルを重要に設定した場合、css ルールをどのように記述しても、ユーザーの重要なステートメントをオーバーライドすることはできないため、すべてのユーザー スタイルをオーバーライドしようとしても無駄です。幸いなことに、これについてはもう考える必要はありません。

重要なルールは異常値です。これは私たちの通常の考え方と一致しません。css ルールの具体性と順序をどのように高めても、重要なルールはそれと競合するルールを上書きします。また、css ルールの慣習的なルールを破壊すると、デバッグに問題が生じます。重要なルールを使用してブラウザをハッキングしたい場合は、一意の要素を指すセレクターでルールを適用する必要があります。 (ps. hack はあまりにも醜いので、ソリューションで最後に検討すべきです。)

最後のポイントは、具体性の低いものから高いものまで css を記述する方法です。

鍵となるのはモジュール式 css です。

グローバル css を追加します
現在のページに統合 css を追加します
ページをいくつかのモジュールに分割します
それぞれの異なるモジュールで id フックを使用し、モジュールでクラス フックを使用します同じモジュール
各モジュールに統一 css を追加
各モジュールを複数のサブモジュールに分割し、ステップ 4 に戻ってスタイルの追加が完了するまでループを開始します。
優れた css を書くことは設計の問題であり、実装の問題ではありません。まず、特異性が非常に低いグローバル css コンテンツ (一般的に使用されるreset.css) を作成する必要があります。これは、web サイト全体のすべてのページのデフォルトのスタイルです。

他のページとは背景が異なるページなど、ページに独自の統一スタイルがある場合は、ページに id を追加し、その id の下に現在のページの統一 css を記述することができます。

body#special{ 
    background-color:black; 
}

統一スタイルを作成した後、ページをいくつかのモジュールに分割します。これらのモジュールが基本的に同じスタイルを持つ場合は、クラス フックを使用します。スタイルが異なる場合は、同じ場合は id フックを使用し、今後モジュールに分割するたびにこの原則に従う必要があります。クラスはあまり具体的ではないため、明らかに似ているモジュールでない場合はクラスを使用すべきではありません。通常、id の名前はモジュールの名前として使用できます。頭やお尻など。 id セレクターはカスケードにおいて重要な役割を果たします。id は排他的であり、高い特異性を持っているため、css ルールが誤ってオーバーライドされるのを防ぐことができます。

特定のモジュールに統一 css がある場合、id セレクターを使用して現在のモジュールに統一スタイルを記述する必要があります。

#head p{ 
    color:red; 
}

クラス フックを追加するときは、クラス名の最初の部分として親モジュール (またはページ自体) の id を使用することをお勧めします。独立したページ (body#special) を追加する場合、モジュールをページのモジュールに分割した後、ページのモジュールにspecial_head、special_bottom などの名前を付ける必要があります。

または、一部のページモジュールでクラスフックを使用する場合は、head_col などを使用する必要があります。この利点は、

#head .col{ 
    /* 头部中每一列的样式 */ 
}

を使用する必要がなく、

.head_col{ 
    /* 头部中每一列的样式 */ 
}

を直接使用できることです。名前の競合を心配する必要はありません。

モジュールの直下に id セレクターが追加された要素の場合、セレクターを直接使用して、名前の前に親モジュールの id を追加できます。

#head_navigator{ 
    /* 头部中导航栏的样式 */ 
}

モジュール型 css を実現するには、クロスモジュール css が表示されないようにする必要があります。良い原則は次のとおりだと思います。特定のスタイルのクロスモジュール機能が一目瞭然なので、クロスモジュール css は使用しないでください。 1 つの例外は、グローバル css またはモジュール内の統合 css です。一目でわかりにくく、スタイルが統一されていないものについては、サブモジュールごとに個別に定義することをお勧めします。これは、java プログラムを作成する際のオブジェクト指向設計と同じで、同じモジュールの css ルールをまとめ、わずかに異なる css ルールを完全に分離するために、モジュール間の相互依存性を減らす必要があります。これは保守が容易なだけでなく、 、ただし、css ルールが誤って上書きされるのを防ぐために、css を低い特異性から高い特異性まで書き込むことも保証します

上記は、カスケード css ルールを使用して css を適用するときに注意する必要がある点です_エクスペリエンス交換コンテンツ, 詳細 関連コンテンツについては、php 中国語 web サイト (www.php.cn) に注目してください。