CSS作为前端页面的样式核心，其编写质量直接影响页面的渲染效果和后期维护成本。很多开发者在编写CSS时常常陷入代码越写越长、样式冲突频发、修改一处影响多处的困境，掌握科学的编写方法能够有效规避这些问题。
建立统一的代码规范
规范的代码是提升CSS质量的基础，团队开发或者个人项目都建议提前制定规则。首先是命名规范，推荐使用BEM命名法，即块、元素、修饰符的结构，避免无意义的命名。比如导航栏的列表项可以命名为nav__item--active，清晰表达元素的作用和状态。
其次是缩进和格式统一，建议统一使用2或4个空格缩进，属性顺序按照布局属性、自身属性、文本属性、视觉属性的顺序排列，比如先写宽高、再写内外边距、然后是字体、最后是背景边框，这样代码可读性会大幅提升。
示例：规范的CSS代码结构
/* 导航栏模块 */
.nav {
/* 布局属性 */
display: flex;
width: 100%;
height: 60px;
/* 自身属性 */
padding: 0 20px;
/* 文本属性 */
font-size: 16px;
/* 视觉属性 */
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* 导航项元素 */
.nav__item {
margin: 0 15px;
line-height: 60px;
color: #333;
}
/* 激活状态的修饰符 */
.nav__item--active {
color: #1677ff;
font-weight: 600;
}
合理拆分CSS模块
不要将所有样式写在一个CSS文件里，模块化拆分能够提升代码的复用性和维护性。可以按照页面模块拆分，比如头部、侧边栏、底部各自对应独立的CSS文件；也可以按照功能拆分，比如重置样式、公共组件样式、页面独有样式分开存放。
公共样式尽量提取通用类，比如统一的间距类、文本对齐类、flex布局类，避免重复编写相同的样式代码。比如常见的flex居中类可以提取为：
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
优化选择器使用
选择器的复杂度会直接影响CSS的解析性能，编写时要尽量保持选择器简洁。首先避免使用过于嵌套的选择器，嵌套层级最好不要超过3层，过深的嵌套不仅增加代码长度，还会提升选择器权重，后续修改时需要更高的权重才能覆盖样式。
其次尽量减少通配符选择器的使用，通配符会匹配所有元素，增加浏览器渲染负担。另外不要使用ID选择器编写样式，ID的权重过高，容易导致样式难以覆盖，优先使用类选择器定义样式。
选择器对比示例
| 不推荐写法 | 推荐写法 | 说明 |
|---|---|---|
.header .nav ul li a { color: #333; } | .nav__link { color: #333; } | 减少嵌套，降低选择器权重 |
#submit-btn { background: #1677ff; } | .btn--primary { background: #1677ff; } | 避免ID选择器，提升可维护性 |
* { margin: 0; padding: 0; } | body,h1,h2,h3,p,ul { margin: 0; padding: 0; } | 减少通配符使用，精准重置样式 |
做好响应式适配
现在多端适配是CSS编写的必备要求，不要针对每个设备写单独的样式，优先使用响应式方案。推荐使用移动端优先的编写思路，先写小屏幕的基础样式，再通过媒体查询适配大屏幕。
媒体查询的断点设置要符合常见设备的尺寸，比如平板断点可以设置为768px，桌面端断点设置为1200px。另外尽量使用相对单位，比如rem、em、%代替固定的px，让布局能够跟随根字体大小或者父元素尺寸自适应。
/* 移动端基础样式 */
.container {
width: 100%;
padding: 0 15px;
}
/* 平板适配 */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* 桌面端适配 */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
利用现代CSS特性简化代码
现在CSS新增了很多实用的特性，能够替代很多需要复杂写法或者依赖JS实现的效果。比如使用flex和grid布局替代传统的浮动布局，能够快速实现复杂的页面排版；使用CSS变量定义全局样式值，修改时只需要改一处就可以全局生效。
/* 定义全局CSS变量 */
:root {
--primary-color: #1677ff;
--text-color: #333;
--spacing-base: 16px;
}
/* 使用变量 */
.btn {
background-color: var(--primary-color);
color: #fff;
padding: calc(var(--spacing-base) * 0.75) var(--spacing-base);
}
/* grid实现三列布局 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-base);
}
做好样式重置和兼容处理
不同浏览器对CSS默认样式的解析存在差异，建议在项目开头引入统一的样式重置代码，消除默认样式的差异。可以使用成熟的reset方案，也可以自己针对常用的元素做重置，比如清除默认的margin和padding，统一盒模型为border-box。
对于需要兼容旧版本浏览器的场景，要注意添加对应的前缀或者使用兼容性更好的写法，比如flex布局旧版本需要添加-webkit-前缀，不过现在大部分现代浏览器已经不需要前缀，可以根据项目的兼容需求决定。
/* 基础样式重置 */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--text-color);
line-height: 1.5;
}
ul,ol {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}