新闻中心/News

为什么你网站的CSS越写越乱？聊聊前端代码规范

CSS是前端开发中最容易被忽视的部分。很多人觉得CSS只要能把页面撑起来就行，不值得花太多心思研究。这种想法在项目初期没问题，但当网站规模扩大、参与人员变多的时候，缺乏规范的CSS就会成为噩梦：改一处样式莫名其妙影响另一个模块，新人看不懂老代码，样式和JS逻辑互相耦合。

一、命名：用语义而不是外观。

很多开发者的CSS类名喜欢用外观描述，比如.red-text、.big-title、.left-div。一旦设计改了，这些名字就全错了，需要改大量HTML。语义化命名则不一样，比如.news-title、.product-price，无论文字颜色怎么变，名字描述的是内容本身，HTML完全不用动。

二、避免层级过深的选择器。

样式冲突解决不了，就通过叠加选择器层级来暴力覆盖，比如.nav .box .list .item .title .text。这样做有几个后果：样式优先级越来越高，后面越来越难覆盖；浏览器匹配计算成本增加；代码阅读困难。建议用BEM这类命名约定，把选择器层级控制在3层以内。

三、把公共样式和业务样式分开。

很多项目CSS写到后期，重复代码满天飞。同样的按钮样式在不同页面复制粘贴了好几遍，一旦需要调整就要全局搜索替换。做好设计系统的抽象：把按钮、输入框、卡片等通用组件的样式单独提取，业务页面只写独有的部分。

四、使用CSS变量而不是硬编码值。

同一套颜色、字号、间距如果硬编码在CSS里，分散在几十个文件中，后期改起来非常痛苦。CSS变量（CSS Custom Properties）可以解决问题：在:root里声明变量，CSS里引用变量名，修改时只需要改一处，所有引用的地方都会同步更新。

五、注释不是可有可无的。

CSS文件头部的注释应该写清楚文件用途、涉及模块、修改注意事项等。好的注释习惯能让团队协作效率提升一大截。注释不是给当下的自己看的，是给三个月后的自己和没看过这段代码的同事看的。

CSS规范不是要把代码框死，而是在多人协作和长期维护的场景下，让代码保持可控、可读、可扩展。养成好的书写习惯，比学会几个奇技淫巧更重要。

本文信息由沈阳云蓝图科技提供，云蓝图科技从事网站制作、网站建设等网络服务，云蓝图科技以“定制开发，源码开发” 的开发理念为客户提供网络服务，十年来，云蓝图科技坚持“诚信为本，用 心售后”的经营理念，用心对待每一位客户，以“保证服务品质，满足客户需求”为服务理念，为客户提供网站制作服务。

上一条： SEO不是玄学：那些真正影响搜索排名的因素

下一条： 2020年沈阳热门行业推荐网络热门搜索词介绍