你应该知道的十大 CSS 小技巧，提高切图效率

前言：
对于切图仔来说，时间就是金钱。为了提高效率，掌握一些 CSS 小技巧至关重要。以下精心挑选的十个技巧将帮助您快速、准确地切出精美设计。

1. 使用选择器范围：
利用 :nth-child、:not() 和 :has() 等选择器来定位特定元素，无需编写冗长的 CSS 代码。例如：

ul li:nth-child(2) {
  /* 只针对列表中的第二个项目应用样式 */
}

2. 重用 CSS 变量：
通过将常见属性值存储在 CSS 变量中，可以轻松地跨元素重用它们。这有助于保持一致性并简化代码。

:root {
  --primary-color: #ff0000;
}

h1 {
  color: var(--primary-color);
}

3. 利用 CSS 网格：
CSS 网格提供了一种强大的布局方式，可以轻松创建复杂的布局。它消除了对浮动或绝对定位的需要。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

4. 简化 Flexbox 布局：
Flexbox 允许您创建灵活的布局，其中元素可以根据可用空间进行调整。使用 flex-grow、flex-shrink 和 flex-basis 等属性可以控制元素的行为。

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

5. 利用伪元素：
伪元素（::before 和 ::after) 允许您在元素上添加额外的内容，而无需创建实际元素。这对于创建边框、装饰或图标非常有用。

.button::before {
  content: "+";
  position: absolute;
}

6. 使用媒体查询：
媒体查询允许您根据设备的屏幕尺寸或其他特性调整 CSS 样式。这有助于创建响应式设计，可针对不同设备进行优化。

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

7. 优化选择器顺序：
选择器越具体，其优先级就越高。优化选择器顺序可以提高 CSS 性能，因为浏览器会更早停止搜索匹配项。

/* 精确选择器 */
#content .item {
  color: red;
}

/* 模糊选择器 */
.item {
  color: blue;
}

8. 避免使用通配符选择器：
通配符选择器（如 *）会降低 CSS 性能，因为浏览器必须检查文档中的所有元素。仅在绝对必要时使用它们。

9. 启用硬件加速：
通过将 transform 和 translate 等属性应用于元素，可以启用硬件加速，从而提高动画和过渡的性能。

.container {
  transform: translateX(10px);
}

10. 使用 CSS 预处理器：
CSS 预处理器（如 Sass 和 Less）可以提高 CSS 代码的可维护性和可重复使用性。它们允许您使用变量、嵌套和混合等高级功能。

$primary-color: #ff0000;

.button {
  color: $primary-color;
}

结论：
掌握这些 CSS 小技巧将极大地提高您的切图效率。通过优化选择器、重用变量、利用布局技术和启用硬件加速，您可以创建精美的设计，同时节省宝贵的时间。持续练习和探索这些技巧将帮助您成为一名出色的切图大师。