css制作心得
合理使用选择器
优先使用类选择器（.class）而非ID选择器（#id），类选择器具有更好的复用性。避免过度嵌套选择器，保持层级扁平化，一般不超过3层。善用属性选择器（[type="text"]）和伪类选择器（:hover）实现精细控制。
模块化样式设计
采用BEM（Block-Element-Modifier）命名规范，例如.header__button--active。将样式拆分为基础样式、布局样式和模块样式，使用Sass/Less的变量和混入功能提高可维护性。建立色彩、间距、字体等设计系统变量。
布局技术选择
现代布局优先考虑Flexbox和Grid系统，传统浮动布局应逐步淘汰。Flexbox适合一维布局（行或列），Grid适合二维复杂布局。使用gap属性替代margin实现间距控制，避免外边距叠加问题。
性能优化策略
压缩CSS文件大小，删除未使用的样式。避免使用@import语句，优先使用<link>标签。减少重绘和回流操作，使用transform和opacity实现动画性能更优。合理使用will-change属性提前告知浏览器变化元素。
响应式设计要点
采用移动优先（Mobile First）原则编写媒体查询。使用相对单位（rem/vw/vh）而非固定像素值。设置meta viewport标签控制视口行为。测试断点选择以内容为依据，而非特定设备尺寸。
调试技巧
浏览器开发者工具的Elements面板可实时编辑样式。使用outline而非border调试布局不会影响盒模型。通过* { background-color: rgba(255,0,0,0.1) }快速可视化所有元素边界。
预处理器最佳实践
Sass/Less变量命名采用语义化名称，如$color-primary。嵌套不超过3层深度，过度嵌套会导致编译后选择器过于具体。混入（Mixin）用于复用样式片段，函数（Function）处理计算逻辑。
