使用class选择器，避免使用ID选择器

在CSS/SCSS开发中，class选择器应该成为你的首选工具，而ID选择器应该尽量避免使用。这一规范基于以下几个重要原因：

1. 可重用性

class选择器可以在多个元素上重复使用，而ID选择器在页面中应该是唯一的。

正面例子：

css 复制代码

/* 良好的class使用 */
.button {
  padding: 10px 15px;
  background-color: #4285f4;
  color: white;
  border-radius: 4px;
}

/* 可以在多个元素上使用 */
<button class="button">提交</button>
<a href="#" class="button">链接按钮</a>

反面例子：

css 复制代码

/* 不好的ID使用 */
#submitButton {
  padding: 10px 15px;
  background-color: #4285f4;
  color: white;
  border-radius: 4px;
}

/* 只能在一个元素上使用 */
<button id="submitButton">提交</button>

2. 特异性(Specificity)问题

ID选择器具有很高的特异性(100分)，而class选择器只有10分。过度使用ID选择器会导致样式难以覆盖。

反面例子：

css 复制代码

#header .nav-item {
  color: blue;
}

/* 即使尝试覆盖也很难 */
.header .nav-item.special {
  color: red; /* 可能不会生效，因为ID选择器特异性更高 */
}

正面例子：

css 复制代码

.header .nav-item {
  color: blue;
}

.header .nav-item.special {
  color: red; /* 现在可以正确覆盖 */
}

3. 维护性

class选择器使样式更易于维护和扩展。

正面例子：

scss 复制代码

// 使用SCSS嵌套和class选择器
.card {
  border: 1px solid #ddd;
  border-radius: 4px;
  
  &-header {
    padding: 15px;
    background: #f5f5f5;
  }
  
  &-body {
    padding: 20px;
  }
}

// 使用
<div class="card">
  <div class="card-header">标题</div>
  <div class="card-body">内容</div>
</div>

反面例子：

css 复制代码

#userCard {
  border: 1px solid #ddd;
  border-radius: 4px;
}

#userCardHeader {
  padding: 15px;
  background: #f5f5f5;
}

#userCardBody {
  padding: 20px;
}

// 使用
<div id="userCard">
  <div id="userCardHeader">标题</div>
  <div id="userCardBody">内容</div>
</div>

何时可以使用ID选择器

虽然我们建议避免使用ID选择器，但在某些情况下它们可能是合适的：

JavaScript钩子：当需要为JavaScript选择特定元素时，可以使用ID选择器
html 复制代码
```
<div id="user-profile-modal"></div>
```
javascript 复制代码
```
document.getElementById('user-profile-modal')
```

页面锚点：用于页面内部导航

html 复制代码

<a href="#section-2">跳转到第二部分</a>
<section id="section-2">...</section>

最佳实践建议

命名约定：使用有意义的、语义化的class名称
css 复制代码
```
/* 好 */
.primary-button
.article-card

/* 不好 */
.btn1
.box2
```
BEM方法论：考虑使用BEM(Block Element Modifier)命名约定
css 复制代码
```
.menu__item--active
```

避免过度嵌套：在SCSS中保持合理的嵌套深度

scss 复制代码

// 好
.card {
  &__header { ... }
  &__body { ... }
}

// 不好
.container {
  .row {
    .col {
      .card {
        .header { ... }
      }
    }
  }
}

使用工具类：对于简单的、可重用的样式

css 复制代码

.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }

总结

遵循"使用class选择器，避免使用ID选择器"这一规范将使你的CSS/SCSS代码更加灵活、可维护和可扩展。class选择器提供了更好的重用性、更低的特异性和更简单的覆盖能力，这些都是构建可维护样式表的关键因素。

记住，CSS设计的目标是创建灵活、可重用的样式系统，而不是为每个元素编写特定的样式。通过遵循这一规范，你将能够构建更健壮、更易于维护的前端代码。