XHTML と CSS によるオブジェクト指向プログラミング

<br />XHTML と CSS がオブジェクト指向だったらよかったのに。。太陽は北から昇るはずです。しかし、すべてを OO の観点から見る必要があり、それではほとんど数字が足りません。実際、数年前に誰かが OO スタイルを提案しましたが、もう見つかりません。
それで、どうやってやるのでしょうか?今では誰もが CSS が次のように書けることを知っています。
.G_G { /* xxxxxx */ }
これをプロトタイプ、またはクラスと考えることができます。-__-b はクラスのようです。次に、HTML でオブジェクトを「インスタンス化」する必要があります。例:
<div class="G_G">バカだなああああ</div>
要素は対応する CSS 定義を使用しますが、対応するクラスだけでは不十分です。ページがこのクラスを複数の場所に適用する可能性があるためです。" private " 関係を適切に処理するには、前のコードを次のように変更します。
<div id="aoao" class="G_G">バカなaoao</div>
この場合、ID aoao の要素は.G_Gクラスの定義を適用し、セレクタ#aoao{}を使用してプライベート効果の定義を入力することができます。これは、パブリック.G_Gクラスに影響を与えません。同時に、#aoao 定義の優先順位は .G_G よりも高くなります。これは、プライベート定義がパブリック定義よりも優先されるという常識と一致しています^^。
ID という固有のものを使用したため、このプライベートに定義されたものの再利用が問題になりました (ID はページに 1 回しか表示できません。誰が言ったのかはわかりませんが、とにかくそれが真実です)。複数の民営化されたものを実装したい場合はどうすればよいでしょうか?次に、「ポリモーフィズム」を実装する必要があります。掘ります、ハハハ。コードを再度変更します。
<div class="G_G o_O">バカだなああああ</div>
1 つは「G_G」、もう 1 つは「o_O」ですが、 .o_O{}を使用すると、CSS が次のようになる場合に要素を定義することもできます。
.G_G {幅:100%} .o_O {色:#123456}
すべての要素が定義され、定義はカスケードされないため、すべて適用されます。コードがこうなったら、もっと分かりやすくなるかな。
<div class="layout color">バカじゃないよ、フクロウ</div>
.layout{幅:100%} .color{色:#123456}
次に、「カプセル化」を実装する必要があります。子セレクターは頻繁に使用されるため、コードを変更します。
<div class="G_G"><span class="bendan">バカ</span> 痛い</div>
.bendan{}と.G_G .bendan{}の両方を定義できますが、後者はクラスが "G_G" の要素にのみ適用できます。.bendan .bendan{}をグローバル定義、 .G_G .bendan{}ローカル定義として簡単に理解できます。これは、XHTML と CSS のモジュール化に役立ちます。 ^^伝説の「カプセル化」が現れ、その後に続きます。
<div id="aoao" class="G_G o_O"><span class="bendan">バカ</span> Aoao</div>
このようなコードは無数の変更を生み出す可能性があります。それでも理解できない場合は、最初から始めてください。 ^^
実際のところ、これらは真のオブジェクト指向からはまだ程遠いものです。私はまだクリックベイトを学んでいるところですが、ID とクラスの適用を理解するために使用できます。

<<: Docker stopはすべてのコンテナを停止/削除します

>>: MySQL 8.0.23 メジャーアップデート (新機能)