相思资源网

CSS代码书写规范究极指南
站长资源 2025/11/4 佚名
46 1538
相思资源网 Design By www.200059.com

1.格式化代码
1.1文件
[建议]：CSS文件使用无BOM的UTF-8编码
1.2缩进
[强制]：使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。

CSS Code复制内容到剪贴板
  1. .selector {   
  2.     margin: 0;   
  3.     padding: 0;   
  4. }  

1.3空格
[强制]：选择器 与 { 之间必须包含空格。

CSS Code复制内容到剪贴板
  1. .selector {   
  2. }  

[强制]：选择器 与 { 之间必须包含空格。

CSS Code复制内容到剪贴板
  1. margin: 0;  

[强制]：列表性属性书在单行时，,后必须跟一个空格

CSS Code复制内容到剪贴板
  1. font-family: Aria, sans-serif;  

1.4行长度
[强制]： 每行不得超过 120 个字符，除非单行不可分割。
[建议]： 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。

CSS Code复制内容到剪贴板
  1. /* 不同属性值按逻辑分组 */  
  2. background:   
  3.     transparent url(aVeryVeryVeryLongUrlIsPlacedHere)   
  4.     no-repeat 0 0;   
  5. /* 可重复多次的属性，每次重复一行 */  
  6. background-image:   
  7.     url(aVeryVeryVeryLongUrlIsPlacedHere)   
  8.     url(anotherVeryVeryVeryLongUrlIsPlacedHere);   
  9. /* 类似函数的属性值可以根据函数调用的缩进进行 */  
  10. background-image: -webkit-gradient(   
  11.     linear,   
  12.     left bottombottom,   
  13.     left top,   
  14.     color-stop(0.04, rgb(88,94,124)),   
  15.     color-stop(0.52, rgb(115,123,162))   
  16. );  

1.5选择器
[强制]：当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

CSS Code复制内容到剪贴板
  1. /* good */  
  2. .post,   
  3. .page,   
  4. .comment {   
  5.     line-height: 1.5;   
  6. }   
  7. /* bad */  
  8. .post, .page, .comment {   
  9.     line-height: 1.5;   
  10. }  

[强制]： >、+、~ 选择器的两边各保留一个空格。
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. main > nav {   
  3.     padding: 10px;   
  4. }   
  5. label + input {   
  6.     margin-left: 5px;   
  7. }   
  8. input:checked ~ button {   
  9.     background-color: #69C;   
  10. }   
  11. /* bad */  
  12. main>nav {   
  13.     padding: 10px;   
  14. }   
  15. label+input {   
  16.     margin-left: 5px;   
  17. }   
  18. input:checked~button {   
  19.     background-color: #69C;   
  20. }  

[强制] 属性选择器中的值必须用双引号包围。

CSS Code复制内容到剪贴板
  1. css   
  2. /* good */  
  3. article[character="juliet"] {   
  4.     voice-family: "Vivien Leigh", victoria, female   
  5. }   
  6. /* bad */  
  7. article[character='juliet'] {   
  8.     voice-family: "Vivien Leigh", victoria, female   
  9. }  

2.选择器与属性缩写
2.1选择器
[强制] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。
解释：在性能和维护性上，都有一定的影响。
示例：
css

CSS Code复制内容到剪贴板
  1. /* good */  
  2. #error,   
  3. .danger-message {   
  4.     font-color: #c00;   
  5. }   
  6. /* bad */  
  7. dialog#error,   
  8. p.danger-message {   
  9.     font-color: #c00;   
  10. }  

[建议] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. #username input {}   
  3. .comment .avatar {}   
  4. /* bad */  
  5. .page .header .login #username input {}   
  6. .comment div * {}  

2.2 属性缩写
[建议] 在可以使用缩写的情况下，尽量使用属性缩写。
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. .post {   
  3.     font: 12px/1.5 arial, sans-serif;   
  4. }   
  5. /* bad */  
  6. .post {   
  7.     font-family: arial, sans-serif;   
  8.     font-size: 12px;   
  9.     line-height: 1.5;   
  10. }  

[建议] 使用 border / margin / padding 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。
解释：border / margin / padding 等缩写会同时设置多个属性的值，容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值，则应该分开设置。
示例：

CSS Code复制内容到剪贴板
  1. /* centering <article class="page"> horizontally and highlight featured ones */  
  2. article {   
  3.     margin: 5px;   
  4.     border: 1px solid #999;   
  5. }   
  6. /* good */  
  7. .page {   
  8.     margin-right: auto;   
  9.     margin-left: auto;   
  10. }   
  11. .featured {   
  12.     border-color: #69c;   
  13. }   
  14. /* bad */  
  15. .page {   
  16.     margin: 5px auto; /* introducing redundancy */  
  17. }   
  18. .featured {   
  19.     border: 1px solid #69c; /* introducing redundancy */  
  20. }  

2.3 每个规则集之间保留一个空行

CSS Code复制内容到剪贴板
  1. /* good */  
  2. .selector1 {   
  3.   display: block;   
  4.   width: 100px;   
  5. }   
  6. .selector2 {   
  7.   padding: 10px;   
  8.   margin: 10px auto;   
  9. }   
  10. /* bad */  
  11. .selector1 {   
  12.   display: block;   
  13.   width: 100px;   
  14. }   
  15. .selector2 {   
  16.   padding: 10px;   
  17.   margin: 10px auto;   
  18. }  

3.值与单位
3.1 文本
[强制] 文本内容必须用双引号包围。
解释：文本类型的内容可能在选择器、属性值等内容中。
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. html[lang|="zh"] q:before {   
  3.     font-family: "Microsoft YaHei", sans-serif;   
  4.     content: "“";   
  5. }   
  6. html[lang|="zh"] q:after {   
  7.     font-family: "Microsoft YaHei", sans-serif;   
  8.     content: "”";   
  9. }   
  10. /* bad */  
  11. html[lang|=zh] q:before {   
  12.     font-family: 'Microsoft YaHei', sans-serif;   
  13.     content: '“';   
  14. }   
  15. html[lang|=zh] q:after {   
  16.     font-family: "Microsoft YaHei", sans-serif;   
  17.     content: "”";   
  18. }  

3.2 数值
[强制] 当数值为 0 - 1 之间的小数时，省略整数部分的 0。
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. panel {   
  3.     opacity: .8   
  4. }   
  5. /* bad */  
  6. panel {   
  7.     opacity: 0.8   
  8. }  

3.3 url()
[强制] url() 函数中的路径不加引号。
示例：

CSS Code复制内容到剪贴板
  1. body {   
  2.     background: url(bg.png);   
  3. }  

3.4 长度
[强制] 长度为 0 时须省略单位。 (也只有长度单位可省)
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. body {   
  3.     padding: 0 5px;   
  4. }   
  5. /* bad */  
  6. body {   
  7.     padding: 0px 5px;   
  8. }  

3.5 颜色
[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。

CSS Code复制内容到剪贴板
  1. /* good */  
  2. .success {   
  3.     box-shadow: 0 0 2px rgba(0, 128, 0, .3);   
  4.     border-color: #008000;   
  5. }   
  6. /* bad */  
  7. .success {   
  8.     box-shadow: 0 0 2px rgba(0,128,0,.3);   
  9.     border-color: rgb(0, 128, 0);   
  10. }  

[强制] 颜色值可以缩写时，必须使用缩写形式。
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. .success {   
  3.     background-color: #aca;   
  4. }   
  5. /* bad */  
  6. .success {   
  7.     background-color: #aaccaa;   
  8. }  

[强制] 颜色值不允许使用命名色值。
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. .success {   
  3.     color: #90ee90;   
  4. }   
  5. /* bad */  
  6. .success {   
  7.     color: lightgreen;   
  8. }  

[建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. .success {   
  3.     background-color: #aca;   
  4.     color: #90ee90;   
  5. }   
  6. /* good */  
  7. .success {   
  8.     background-color: #ACA;   
  9.     color: #90EE90;   
  10. }   
  11. /* bad */  
  12. .success {   
  13.     background-color: #ACA;   
  14.     color: #90ee90;   
  15. }   

3.6 2D 位置
[强制] 必须同时给出水平和垂直方向的位置。
解释：
2D 位置初始值为 0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为 center。为避免理解上的困扰，应同时给出两个方向的值。background-position属性值的定义
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. body {   
  3.     background-position: center top; /* 50% 0% */  
  4. }   
  5. /* bad */  
  6. body {   
  7.     background-position: top; /* 50% 0% */  
  8. }  

4.文本编排
4.1 字体族
[强制] font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。
解释：
所谓英文 Family Name，为字体文件的一个元数据，常见名称如下：
字体 操作系统 Family Name 宋体 (中易宋体) Windows SimSun 黑体 (中易黑体) Windows SimHei 微软雅黑 Windows Microsoft YaHei 微软正黑 Windows Microsoft JhengHei 华文黑体 Mac/iOS STHeiti 冬青黑体 Mac/iOS Hiragino Sans GB 文泉驿正黑 Linux WenQuanYi Zen Hei 文泉驿微米黑 Linux WenQuanYi Micro Hei
示例：

CSS Code复制内容到剪贴板
  1. h1 {   
  2.     font-family: "Microsoft YaHei";   
  3. }  

[强制] font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( serif / sans-serif )
解释：
更详细说明可参考本文。
示例：

CSS Code复制内容到剪贴板
  1. /* Display according to platform */  
  2. .article {   
  3.     font-family: Arial, sans-serif;   
  4. }   
  5. /* Specific for most platforms */  
  6. h1 {   
  7.     font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;   
  8. }  

[强制] font-family 不区分大小写，但在同一个项目中，同样的 Family Name 大小写必须统一。
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. body {   
  3.     font-family: Arial, sans-serif;   
  4. }   
  5. h1 {   
  6.     font-family: Arial, "Microsoft YaHei", sans-serif;   
  7. }   
  8. /* bad */  
  9. body {   
  10.     font-family: arial, sans-serif;   
  11. }   
  12. h1 {   
  13.     font-family: Arial, "Microsoft YaHei", sans-serif;   
  14. }  

4.2 字号
[强制] 需要在 Windows 平台显示的中文内容，其字号应不小于 12px。
解释：由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。
4.3 字体风格
[建议] 需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style。其他平台也应慎用。
解释：
由于中文字体没有 italic 风格的实现，所有浏览器下都会 fallback 到 obilique 实现 (自动拟合为斜体)，小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差，造成阅读困难。

5 变换与动画
[强制] 使用 transition 时应指定 transition-property。
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. .box {   
  3.     transition: color 1s, border-color 1s;   
  4. }   
  5. /* bad */  
  6. .box {   
  7.     transition: all 1s;   
  8. }  

[建议] 尽可能在浏览器能高效实现的属性上添加过渡和动画。
解释：
见本文，在可能的情况下应选择这样四种变换：

CSS Code复制内容到剪贴板
  1. transform: translate(npx, npx);   
  2. transform: scale(n);   
  3. transform: rotate(ndeg);   
  4. opacity: 0..1;  

典型的，可以使用 translate 来代替 left 作为动画属性。
示例：

CSS Code复制内容到剪贴板
  1. /* good */  
  2. .box {   
  3.     transition: transform 1s;   
  4. }   
  5. .box:hover {   
  6.     transform: translate(20px); /* move right for 20px */  
  7. }   
  8. /* bad */  
  9. .box {   
  10.     left: 0;   
  11.     transition: left 1s;   
  12. }   
  13. .box:hover {   
  14.     left: 20px; /* move right for 20px */  
  15. }   

6 响应式
[强制] Media Query 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。
示例：

CSS Code复制内容到剪贴板
  1. @media   
  2. (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */  
  3. (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */  
  4. (min-resolution: 2dppx),             /* The standard way */  
  5. (min-resolution: 192dpi) {           /* dppx fallback */  
  6.     /* Retina-specific stuff here */  
  7. }  

7.CSS注释
普通注释

CSS Code复制内容到剪贴板
  1. /* 普通注释 */  

区块注释

CSS Code复制内容到剪贴板
  1. /**  
  2.  * 模块：m-detail  
  3.  * author: xxx  
  4.  * edit:   2016.5.02  
  5.  */  

8.CSS命名规范
8.1命名组成
命名必须由单词，中划线组成。例如:.info,.news-list
不推荐使用拼音来作为样式名，尤其是缩写的拼音、拼音与英文的混合
所有命名都使用小写,使用中划线 “-” 作为连接字符，而不是下划线 “_“
8.2命名前缀
 前缀 说明 示例 g- 全局通用样式命名 g-mod m- 模块命名方式 m-detail ui- 组件命名方式 ui-selector j- 所有用于纯交互的命名，不涉及任何样式规则。 J-switch
不允许出现以类似：.info, .current, .news 开头的选择器，比如：

CSS Code复制内容到剪贴板
  1. .info{sRules;}   

因为这样将给我们带来不可预知的管理麻烦以及沉重的历史包袱。你永远也不会知道哪些样式名已经被用掉了，如果你是一个新人，你可能会遭遇，你每定义个样式名，都有同名的样式已存在，然后你只能是换样式名或者覆盖规则。所以我们推荐这样写：

CSS Code复制内容到剪贴板
  1. .m-xxx .info{sRules;}  

所有的选择器必须是以 g-, m-, ui- 等有前缀的选择符开头的，意思就是说所有的规则都必须在某个相对的作用域下才生效，尽可能减少全局污染。 J- 这种级别的className完全交由JSer自定义，但是命名的规则也可以保持跟重构一致，比如说不能使用拼音之类的
8.3命名单词
不以表现来命名，而是根据内容来命名。比如：left, right, center, red, black这种以表现来定命名，不允许出现；
推荐使用功能和内容相关词汇的命名，如:
全选复制放进笔记套系:package
相册:photo-album
作品:works
攻略:raiders
普通用户:normal-user
达人:talent-user
摄影师:photographer
用户昵称:user-alias
头像:head
地区:area
关注数:follow
粉丝数:followers
互相注意:attention
标签:label
发表时间:publish-date,publish-time
标题:title
信息:info
内容:content
关于我:about
简介内容:intro-content
评论:review
服务:service
封面:cover
流行:popular
收藏:collect
查看:view
预约:reservation
促销:sale-promotion

9.兼容性
9.1 属性前缀
[强制] 带私有前缀的属性由长到短排列，按冒号位置对齐。
解释：
标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。
示例：

CSS Code复制内容到剪贴板
  1. .box {   
  2.     -webkit-box-sizing: border-box;   
  3.        -moz-box-sizing: border-box;   
  4.             box-sizing: border-box;   
  5. }  

9.2 Hack
[建议] 需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。
解释：
如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式，则不应该使用 hack 手段解决问题。通常 hack 会导致维护成本的增加。
[建议] 尽量使用 选择器 hack 处理兼容性，而非 属性 hack。
解释：
尽量使用符合 CSS 语法的 selector hack，可以避免一些第三方库无法识别 hack 语法的问题。
示例：

CSS Code复制内容到剪贴板
  1. /* IE 7 */  
  2. *:first-child + html #header {   
  3.     margin-top: 3px;   
  4.     padding: 5px;   
  5. }   
  6. /* IE 6 */  
  7. * html #header {   
  8.     margin-top: 5px;   
  9.     padding: 4px;   
  10. }  

[建议] 尽量使用简单的 属性 hack。
示例：

CSS Code复制内容到剪贴板
  1. .box {   
  2.     _display: inline; /* fix double margin */  
  3.     float: left;   
  4.     margin-left: 20px;   
  5. }   
  6. .container {   
  7.     overflow: hidden;   
  8.     *zoom: 1; /* triggering hasLayout */  
  9. }  
标签：
CSS,规范
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com

评论“CSS代码书写规范究极指南”

暂无CSS代码书写规范究极指南的评论...
www.200059.com 相思资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2025/11/4

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 MicroAirGrinder 南强小屋 幽灵资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 HerbalExtract 蝙蝠岛资源网 白云城资源网 天枫庄资源网 无争山庄资源网 HerbalExtracts FoodColouring NaturalHerbal HerbalOnline NaturalColouring 更多链接
相思资源网 Design By www.200059.com