常用技巧与代码组织

最后是几条让代码更专业的实用心法：

• 通用类思维：把重复模式抽成工具类，如 .text-center、.mt-8，减少重复声明。
• 组织顺序：同一规则内按「布局 → 盒模型 → 视觉 → 文字」排序，团队统一即可，重点是一致性。
• 文件拆分：base.css（重置与默认）、layout.css（骨架）、components.css（组件）分文件引入，各改各的。
• 命名习惯：类名描述「是什么」而非「长什么样」，用 .btn-primary 而不是 .blue-btn，主题换了名字不用改。
• 先重置再开发：引入 normalize 或一行 * { margin:0; padding:0; box-sizing:border-box; }，抹平浏览器差异。

到这里，CSS 的地基已经完整：盒模型是砖、选择器是工具、布局是结构、层叠是规则。接下来的 CSS3 课程会在这个地基上玩出渐变、动画、变换这些花活。

<style>
  /* base.css：先重置 */
  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* 工具类：到处复用 */
  .text-center { text-align: center; }
  .mt-8 { margin-top: 8px; }

  /* 组件类：语义命名 */
  .btn-primary {
    background: var(--primary, #4a9eff);
    color: #fff;
    padding: 8px 16px;
  }
</style>
<div class="text-center">
  <p class="mt-8">居中的提示文字</p>
  <button class="btn-primary">主按钮</button>
</div>

📤 分享本文

微博QQQ+贴豆XfinRTGPWA✉

📚 推荐阅读

YY UED 前端规范指南万象云档优达学城前端样式指南万象云档移动前端开发经验指南万象云档Element Plus v2.2 组件库教程万象云档带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读