css手工制作

手工制作 CSS 的方法

手工制作 CSS 指的是不依赖预处理器（如 Sass、Less）或框架（如 Bootstrap），直接编写原生 CSS 代码。以下是手工制作 CSS 的关键方法和注意事项：

规划结构与命名规范
采用 BEM（Block-Element-Modifier）或其他命名约定，确保类名语义化且可维护。例如：

.card__title--highlight {
  color: #ff5733;
}

模块化编写
按功能或组件拆分 CSS 文件，例如 layout.css、buttons.css。通过 @import 合并或直接在 HTML 中按需加载。

使用 CSS 变量
定义全局变量提升复用性，便于主题切换：

:root {
  --primary-color: #3498db;
}
.button {
  background-color: var(--primary-color);
}

避免过度嵌套
手工 CSS 不支持嵌套语法（除非使用原生嵌套实验特性），需保持扁平化结构：

.navbar { /* styles */ }
.navbar .item { /* styles */ }

响应式设计
通过媒体查询适配不同设备：

@media (max-width: 768px) {
  .menu { display: none; }
}

性能优化

• 减少冗余代码，合并重复属性。
• 使用 will-change 优化动画性能。
• 避免通配符选择器（如 *）。

浏览器兼容性
手动添加前缀或使用工具生成：

.box {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

调试与验证

• 使用浏览器开发者工具检查样式覆盖。
• 通过 W3C CSS Validator 检查语法错误。

手工制作 CSS 适合小型项目或需要精细控制的场景，但需权衡维护成本与开发效率。