CSS コメントの高度な使用法の紹介

CSS コメントの高度な使用法

準修飾セレクター

過度に修飾されたセレクターは避ける必要があります。たとえば、.nav{} を記述できる場合は、ul.nav{} は記述しないようにしてください。セレクターを過度に変更すると、パフォーマンスに影響し、クラスの再利用性に影響し、セレクターのプライバシーが高まります。これらは避けるべきものです。

しかし、場合によっては、クラスの使用範囲を他の開発者に伝えたい場合もあります。 .product-page を例にとると、このクラスはルート コンテナのように見えます。ルート コンテナは html 要素または body 要素である可能性がありますが、.product-page のみに基づいて決定することはできません。

セレクターの前に準変更を追加 (つまり、前の型セレクターをコメントアウト) して、計画したクラスのスコープを記述することができます:

/*html*/.product-page{}

このようにして、クラスのスコープに影響を与えることなく、クラスのスコープを正確に知ることができます。使いやすさ。

他の例は次のとおりです:

/*ol*/.breadcrumb{}  
    /*p*/.intro{}  
    /*ul*/.image-thumbs{}

この方法により、コードのプライバシーに影響を与えることなくクラスのスコープを知ることができます。
コード タグ

新しいスタイルのセットを作成する場合、それにタグを追加できます。例:

/** 
     * ^navigation ^lists 
     */ 
    .nav{}  
     
    /** 
     * ^grids ^lists ^tables 
     */ 
    .matrix{}

これらのタグを使用すると、他の開発者が関連するコードをすばやく見つけることができます。開発者がリストに関連するパーツを見つける必要がある場合、^list を検索することで、.nav、.matrix、およびその他の関連パーツをすばやく見つけることができます。
マークアップの継承

オブジェクト指向の考え方を CSS の記述に適用すると、密接に関連している CSS の 2 つの部分 (1 つは基礎、もう 1 つは拡張) が 2 つの場所に分かれていることがよくわかります。継承タグを使用すると、元の要素と継承された要素の間に密接な関係を確立できます。これらはコメント内で次のように書かれています:

要素の基本スタイル内:

/** 
     * Extend `.foo` in theme.css 
     */ 
     .foo{}

要素の拡張スタイル内:

/** 
     * Extends `.foo` in base.css 
     */ 
     .bar{}

このようにして、遠く離れた 2 つのコード間に緊密な接続を確立できます。