【CSS进阶】如何写出更优雅的 CSS 代码？

以下是一些简单的 CSS 代码实例：

1.避免过度使用 !important：使用 !important 可以覆盖其他样式，但容易导致样式难以维护和调试：

/* 不推荐 */
div {
  color: red !important;
}

/* 推荐 */
div.error {
  color: red;
}

2.选择器的嵌套层数不要太多：选择器嵌套层数过多会影响性能，而且会让样式难以重写：

/* 不推荐 */
div ul li a {
  color: blue;
}

/* 推荐 */
a.link {
  color: blue;
}

3.保持代码简洁：不要写重复的样式，可以使用 CSS 预处理器来减少代码冗余：

/* 不推荐 */
div {
  font-size: 16px;
  font-size: 1rem;
}

/* 推荐 */
div {
  font-size: 1rem;
}

4.使用语义化的类名：使用语义化的类名可以让代码更易于理解和维护：

/* 不推荐 */
div.red {
  color: red;
}

/* 推荐 */
div.error {
  color: red;
}

5.注重命名规范：使用有意义的命名可以让代码更易于理解和维护：

/* 不推荐 */
div.c {
  color: blue;
}

/* 推荐 */
div.container {
  color: blue;
}

6.使用 flexbox 和 grid 布局：使用这两种布局可以让代码更简洁、更易于维护，并且能够实现复杂的布局效果：

/* 不推荐 */
div {
  float: left;
  width: 50%;
}

/* 推荐 */
div {
  display: flex;
}

/* 不推荐 */
div {
  float: left;
  width: calc(100% / 3);
}

/* 推荐 */
div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

7.使用变量：使用变量可以让代码更易于维护和修改：

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

.btn-primary {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-secondary {
  color: #fff;
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

在这个示例中，我们定义了两个变量 --primary-color 和 --secondary-color，并将它们应用于 .btn-primary 和 .btn-secondary 类。如果我们想要更改这些按钮的颜色，只需要更改变量的值即可，而不需要修改每个类的样式。

此外，使用变量还可以提高代码的可读性和复用性。可以在 :root 伪类中定义全局变量，然后在整个文档中使用这些变量。这样，如果需要更改颜色或其他样式，只需要更改变量的值即可，而不需要修改每个类的样式。