[分享]css不要用下划线命名

CSS是网页设计中最重要的一种语言，它为网页带来了美观、清晰的视觉效果。但是在使用CSS的过程中，我们需要注意一个细节问题，那就是不要使用下划线命名。/ 不好的命名： / header_contain...

CSS是网页设计中最重要的一种语言，它为网页带来了美观、清晰的视觉效果。但是在使用CSS的过程中，我们需要注意一个细节问题，那就是不要使用下划线命名。

/* 不好的命名： */
#header_container {
  /* ... */
}

/* 好的命名： */
#header-container {
  /* ... */
} 

下划线命名的问题在于它会和HTML标签的class属性产生混淆。以前，人们习惯把class属性用下划线来分隔单词，比如<div class="header_container">，这样可以区分出各个单词。但是在CSS中，我们使用“-”符号来连接单词，比如#header-container。因此如果使用下划线命名，就会和HTML中的class属性混淆，给代码阅读和维护带来不便。

除此之外，下划线命名还会让代码产生歧义，给开发者造成困惑。比如下面这段代码：

/* 不好的命名： */
.nav_item_active {
  /* ... */
}

/* 好的命名： */
.nav-item.active {
  /* ... */
} 

在这段代码中，.nav_item_active的命名方式可能会被误认为是一个标签名，而不是class名。而如果使用.nav-item.active这种命名方式，可以清晰地表达出要选择的是一个带有class="nav-item active"的元素。

总的来说，虽然下划线命名在过去使用的较多，但在现在的网页设计中已经不再推荐使用。相反，使用连字符“-”来连接单词，可以让代码更加整洁清晰，并能避免和HTML标签混淆，提高代码的可读性和可维护性。