CSSファイルのID名を避ける方法

Question

CSSファイルのid & classの名前をスキャンする効率的な方法はありますか？私のWebアプリケーションには多くのCSSファイルがあり、今ではさらにCSSファイルを追加する必要があります。私はしばしばID &のクラス名を定義することに固執し、別のCSSファイルですでに定義されており、テスト中に問題を引き起こします。 ID &のクラス名を変更し続けるのは本当にうんざりです。ある人が私にそれを整理するためのヒントを与えることができます。

@Edit：Webアプリケーション内の2つのCSSファイルold_1.css & old_2.css

old_1.css #id_1 {width:100%;height:100%; .... } 
      #id_2 { width:50%; height:50%; .... } 

old_2.css #id_3 {width:70%;height:70%; .... } 
      #id_4 { width:30%; height:30%; .... } 

今私は新しいCSSファイルnew_1.cssを作成していますし、誤って私は古いCSSファイルのsimmilar IDを書いたがあるとします。これは私が立ち往生し、同じIDを書き直すのを避けたいところです。

new_1.css #id_1 {width:80%;height:80%; .... } // this id is already declared in old css file 

Answer 1

各CSSクラス名が一意であることを保証するのではなく、CSSスタイルが、CSSに親要素を含めることで衝突しないようにしてください。これは構造のためのより良いです：

HTML：

<div class="section1"> 
    <div class="inner_div"> 

    </div> 
</div> 
<div class="section2"> 
    <div class="inner_div"> 

    </div> 
</div> 

CSS：

.section1 { 

} 
    .section1 .inner_div { 
     color:red; 
    } 

.section2 { 

} 
    .section2 .inner_div { 
     color:blue; 
    } 

これだけdiv年代inner_divクラスでは、それらが中に含まれているスタイルcolor:redを与えられることを保証しますクラスsection1のdivです。同様にdivのinner_divのスタイルはcolor:blueとなり、divのクラスsection2に含まれています。

この形式を使用すると、好きなように定義できるように、クラス名が重複しないようにすることができます。例えば、私が使用するニュース記事の日付を表示するスパンタグにスタイルを適用する場合は、 @Antが述べているように良いHTMLエディタsoftwarを使用し、それ以外の場合は

.news_article_date {} 

---

：

.main_container .news .article .details span.date {} 

これはたくさん読みやすく、そしてよりも複製するはるかに少ない可能性がありますeを使って、使用されたクラスとIDでFindを実行します。

Answer 2

古いCSSファイルのリファクタリングが現在の作業範囲を超えている場合は、セレクタをより具体的にすることで古いスタイルをオーバーライドできます。 CSSの特殊性に関する良いチュートリアルが提供されますhere