html - 如何避免css文件中的ID名称

Question

有什么有效的方法可以扫描 css 文件中的 id & class 名称吗？我的网络应用程序中有很多 css 文件，现在我必须添加更多的 css 文件。我经常被卡在定义已经在另一个 css 文件中定义的 ID 和类名，这在测试期间会导致问题。我真的厌倦了不断更改 ID 和类名。有人可以给我任何提示来解决这个问题吗。

@Edit : 假设在一个网络应用程序中有两个 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;
    }

这将确保只有 inner_div 类的 div 将被赋予 color:red 样式，它们包含在 div 与类 section1。同样，只有带有 inner_div 的 div 将被设置为 color:blue，它们包含在带有类 section2。

使用这种格式应该可以防止你有重复的类名，因为你可以根据自己的喜好定义，例如，如果我将样式应用于显示新闻文章日期的 span 标签，我会使用:

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

与以下相比，这更容易阅读，并且被复制的可能性要小得多:

.news_article_date {}

---

否则，就像@Ant 所说的那样，使用一个好的 HTML 编辑器软件并对使用的类和 ID 进行查找。