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 适合小型项目或需要精细控制的场景，但需权衡维护成本与开发效率。
