CSS 编码规范

CSS 编码规范

    • 1 CSS
      • 1.1 编码规范
        • 1.1.1 【强制】所有声明必须以分号结尾
        • 1.1.2 【推荐】使用 2 个空格缩进
        • 1.1.3 【推荐】选择器与 { 之间保留一个空格
        • 1.1.4 【推荐】属性值规范
        • 1.1.5 【推荐】组合器规范
        • 1.1.6 【推荐】逗号分隔规范
        • 1.1.7 【推荐】注释规范
        • 1.1.8 【推荐】右大括号规范
        • 1.1.9 【推荐】属性声明规范
        • 1.1.10 【推荐】代码行长度规范
        • 1.1.11 【参考】多选择器规范
        • 1.1.12 【参考】单行声明规范
        • 1.1.13 【参考】注释规范
      • 1.2 选择器规范
        • 1.2.1 【参考】避免使用 ID 选择器
        • 1.2.2 【参考】属性选择器引号规范
        • 1.2.3 【参考】选择器性能优化
      • 1.3.属性和属性值
        • 1.3.1.【推荐】使用简短的十六进制值。
        • 1.3.2.【推荐】避免使用!important覆盖样式。
        • 1.3.3.【推荐】十六进制值统一使用小写字母（更易辨识）。
        • 1.3.4.【推荐】当长度值为0时，省略单位。
        • 1.3.5.【参考】保留小数点前的0。
        • 1.3.6.【参考】属性声明顺序建议：
        • 1.3.7.【参考】合理使用简写属性。
      • 1.4.其他
        • 1.4.1.【推荐】避免使用CSS的@import。
    • 2.Sass和Less
        • 2.1.【推荐】运算符两侧保留空格：
        • 2.2.【推荐】Mixin格式规范：
        • 2.3.【推荐】代码组织顺序：
        • 2.4.【推荐】块内属性声明顺序：
        • 2.5.【推荐】嵌套选择器不超过3层。
        • 2.6.【推荐】注释规范：
        • 2.7.【推荐】优先使用Mixin而非@extend。

本规范适用于 CSS 及其预编译语言（Sass、Less）的编码风格，部分规则可通过 stylelint 工具实现。

1 CSS

1.1 编码规范

具体规则如下：

1.1.1 【强制】所有声明必须以分号结尾

stylelint: declaration-block-trailing-semicolon

虽然 CSS 语法中最后一条声明的分号是可选的，但统一使用分号能提高代码一致性和可维护性。

/* bad */
.selector {margin-top: 10pxpadding-left: 15px
}/* good */
.selector {margin-top: 10px;padding-left: 15px;
}
1.1.2 【推荐】使用 2 个空格缩进

stylelint: indentation

/* bad */
.selector {padding-left: 15px;
}/* good */
.selector {padding-left: 15px;
}
1.1.3 【推荐】选择器与 { 之间保留一个空格

stylelint: block-opening-brace-space-before

/* bad */
.selector{padding-left: 15px;
}/* good */
.selector {padding-left: 15px;
}
1.1.4 【推荐】属性值规范

stylelint: declaration-colon-space-after, declaration-colon-space-before

/* bad */
.selector {margin-top : 10px;padding-left:15px;
}/* good */
.selector {margin-top: 10px;padding-left: 15px;
}
1.1.5 【推荐】组合器规范

stylelint: selector-combinator-space-before, selector-combinator-space-after

/* bad */
.selector>.children {padding-left: 15px;
}
.selector+.brother {padding-left: 15px;
}/* good */
.selector > .children {padding-left: 15px;
}
.selector + .brother {padding-left: 15px;
}
1.1.6 【推荐】逗号分隔规范

stylelint: value-list-comma-space-after

/* bad */
.selector {background-color: rgba(0,0,0,0.5);box-shadow: 0px 1px 2px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.5);
}/* good */
.selector {background-color: rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
1.1.7 【推荐】注释规范

stylelint: comment-whitespace-inside

/* bad */
.selector {/*comment*//*  comment  *//***comment*/padding-left: 15px;
}/* good */
.selector {/* comment *//*** comment*/padding-left: 15px;
}
1.1.8 【推荐】右大括号规范

声明块的右大括号 } 应单独成行。

/* 不推荐 */
.selector {padding-left: 15px;}/* 推荐 */
.selector {padding-left: 15px;
}
1.1.9 【推荐】属性声明规范

属性声明应单独成行。
stylelint: declaration-block-single-line-max-declarations

/* 不推荐 */
.selector {padding-left: 15px;  margin-left: 10px;
}/* 推荐 */
.selector {padding-left: 15px;margin-left: 10px;
}
1.1.10 【推荐】代码行长度规范

单行代码长度不超过 100 个字符。
stylelint: max-line-length
例外情况：

  • 使用 url() 函数时
  • 属性值本身无法换行（不含空格或逗号）
/* 不推荐 */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.04, rgb(88, 94, 124)), color-stop(0.52, rgb(115, 123, 162)));/* 推荐 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.04, rgb(88, 94, 124)),color-stop(0.52, rgb(115, 123, 162))
);
1.1.11 【参考】多选择器规范

多个选择器应分行书写。
stylelint: selector-list-comma-newline-after

/* 不推荐 */
.selector, .selector-secondary, .selector-third {padding: 15px;margin-bottom: 15px;
}/* 推荐 */
.selector,
.selector-secondary,
.selector-third {padding: 15px;margin-bottom: 15px;
}
1.1.12 【参考】单行声明规范

即使声明块内只有一条语句，也应使用多行格式。

/* 不推荐 */
.selector { padding-left: 15px; }/* 推荐 */
.selector {padding-left: 15px;
}
1.1.13 【参考】注释规范

注释上方需留空行（除非上方是注释或块顶部）。
stylelint: comment-empty-line-before

/* 不推荐 */
.selector {/* 注释 */padding-left: 15px;/* 注释 */padding-right: 15px;
}/* 推荐 */
.selector {/* 注释 */padding-left: 15px;/* 注释 */padding-right: 15px;
}

1.2 选择器规范

1.2.1 【参考】避免使用 ID 选择器

stylelint: selector-max-id
ID 选择器优先级过高，会导致后续样式难以覆盖，可能引发 !important 滥用。

/* 不推荐 */
#special {padding: 15px;
}/* 推荐 */
.special {padding: 15px;
}
1.2.2 【参考】属性选择器引号规范

属性选择器的值需用双引号包裹。
stylelint: selector-attribute-quotes

/* 不推荐 */
input[type=text] {height: 20px;
}/* 推荐 */
input[type="text"] {height: 20px;
}
1.2.3 【参考】选择器性能优化

优化建议：

  1. 优先使用 class 而非元素标签
  2. 避免在常用组件中使用属性选择器（如 [class^=“…”])
  3. 控制选择器长度（不超过3个组合）

选择器效率排序（高→低）：
ID 选择器（#header）
类选择器（.header）
标签选择器（div）
相邻兄弟选择器（h2 + p）
子选择器（ul > li）
后代选择器（ul a）
通配符选择器（*）
属性选择器（[class^=“grid-”]）
伪类/伪元素选择器（a:hover, a::before）

1.3.属性和属性值

1.3.1.【推荐】使用简短的十六进制值。

stylelint: color-hex-length

/* 不推荐 */
.selector {color: #ffffff;
}/* 推荐 */
.selector {color: #fff;
}
1.3.2.【推荐】避免使用!important覆盖样式。
1.3.3.【推荐】十六进制值统一使用小写字母（更易辨识）。

stylelint: color-hex-case

/* 不推荐 */
.selector {color: #FEFEFE;
}/* 推荐 */
.selector {color: #fefefe;
}
1.3.4.【推荐】当长度值为0时，省略单位。

stylelint: length-zero-no-unit

/* 不推荐 */
.selector {margin-top: 0px;font-size: 0em;
}/* 推荐 */
.selector {margin-top: 0;font-size: 0;
}
1.3.5.【参考】保留小数点前的0。

stylelint: number-leading-zero

/* 不推荐 */
.selector {opacity: .5;left: -.5px;
}/* 推荐 */
.selector {opacity: 0.5;left: -0.5px;
}
1.3.6.【参考】属性声明顺序建议：
  1. 定位属性（position、z-index等）
  2. 盒模型属性（display、width等）
  3. 排版属性（font、color等）
  4. 外观属性（background等）
  5. 其他属性
1.3.7.【参考】合理使用简写属性。

stylelint: declaration-block-no-shorthand-property-overrides

/* 不推荐 */
.selector {margin: 0 0 10px;
}/* 推荐 */
.selector {margin-bottom: 10px;
}

1.4.其他

1.4.1.【推荐】避免使用CSS的@import。

与 相比，@import 会在关键渲染路径上增加更多的往返（即关键路径的深度变长），这样会导致浏览器处理 CSS 文件速度变慢，因此我们应该避免使用 @import。

/* 不推荐 */
<style>@import url("more.css");
</style>/* 推荐 */
<link rel="stylesheet" href="more.css">

2.Sass和Less

2.1.【推荐】运算符两侧保留空格：
/* 推荐 */
.selector {width: $default-width / 2;
}
2.2.【推荐】Mixin格式规范：
/* 推荐 */
.selector {.size(30px, 20px);.clearfix();
}
2.3.【推荐】代码组织顺序：
  1. @import语句
  2. 全局变量声明
  3. 样式声明
2.4.【推荐】块内属性声明顺序：
  1. 标准属性
  2. mixin调用
  3. 嵌套选择器
2.5.【推荐】嵌套选择器不超过3层。
2.6.【推荐】注释规范：
  • 双斜杠注释编译后会被删除
  • /**/注释会被保留
2.7.【推荐】优先使用Mixin而非@extend。

使用 Mixin（通过 @mixin 和 @include 指令）提升代码复用性，遵循 DRY 原则（Don’t Repeat Yourself），同时增强代码抽象能力并降低复杂度。

不建议使用 @extend 指令，因其存在以下问题：

  1. 可读性较差，尤其在嵌套选择器中表现尤为明显
  2. 具有潜在风险，当选择器顺序发生变化时（特别是跨文件引用时）可能导致样式异常

虽然 @extend 相比无参数 Mixin 能减少编译后的代码量（避免重复输出），但现代压缩工具（如 gzip）能有效处理重复代码。因此，建议优先使用 Mixin 来实现 DRY 原则。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/97823.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/97823.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ORA-12514:TNS:监听程序当前无法识别连接描述符中请求的服务

ORA-12514:TNS:监听程序当前无法识别连接描述符中请求的服务

已经不止一次自己本机电脑安装的Oracle使用plsqldev软件登入提示这个了.一般前一天还好好的&#xff0c;今天就不行了.好好总结一下吧&#xff0c;也共大家一起借鉴.主要原因还是数据的归档日志因为内部内存已经耗尽&#xff0c;不能在进行归档导致数据库启动异常&#xff0c;没…
阅读更多...
Spring框架的JDBC模板技术和事务管理

Spring框架的JDBC模板技术和事务管理

SpringJDBCJDBC模板技术概述JDBC的模板类的使用Spring框架的事务管理配置文件方式半注解的方式纯注解的方式JDBC模板技术概述 什么是 JDBC 模板技术&#xff1f; JDBC 模板技术是 Spring 框架为简化持久层&#xff08;数据库操作&#xff09;编程而提供的一种封装机制&#xf…
阅读更多...
将文件部署到受管主机

将文件部署到受管主机

目录 1.ansible.builtin中用于创建、更新或删除多行文本块的模块是什么 2.copy模块的作用 3.fetch模块的作用 4.file模块的作用 5.lineinfile模块的作用 6.stat模块的作用 7.要确保受管主机上存在文件&#xff0c;类似touch命令功能&#xff0c;还能设置权限等的模块及操作是怎…
阅读更多...
Dell PowerEdge R620 服务器内存和硬盘罢工了

Dell PowerEdge R620 服务器内存和硬盘罢工了

文章目录前言调查原因查找解决方案硬盘问题内存问题总结前言 月黑风高夜&#xff0c;服务宕机时。做服务端技术的&#xff0c;谁还没半夜遇到个服务挂掉的情况&#xff0c;而像我这种半兼职网管的工作&#xff0c;遇到机器问题的概率也就更大了&#xff0c;本来周五晚上写完总…
阅读更多...
2025：SourceTree 启用/禁用Mercurial 或 Git，像素级细节

2025：SourceTree 启用/禁用Mercurial 或 Git，像素级细节

最近使用Git管理工具的时候&#xff0c;发现还是SourceTree好用些&#xff0c;但是使用SourceTree带来一个问题&#xff1a;就是每次在重新打开SourceTree的时候&#xff0c;都会重新下载Mercurial.zip文件&#xff0c;查了一下&#xff0c;一般情况下我们是不需要使用Mercuria…
阅读更多...
安卓 Google Maps 的使用和开发步骤

安卓 Google Maps 的使用和开发步骤

文章目录1. main2. Android 谷歌地图3. 源码Reference1. main 在国内选择的SDK可以是高德、百度、腾讯、xxxx等&#xff0c;但在国外&#xff0c;你首选是谷歌&#xff0c;因此要进行Google地图的开发你首先要解决下面三个问题 VPN Google账号 信用卡American Express&#x…
阅读更多...
Linux -- 应用层协议Http

Linux -- 应用层协议Http

1.HTTP背景知识 HTTP协议&#xff1a;HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;的本质是运行在 TCP/IP 协议族之上的 “应用层协议”&#xff0c;核心作用是定义客户端&#xff08;如浏览器、APP&#xff09;与服务器之间的 “数据…
阅读更多...
R 语言本身并不直接支持 Python 中 f“{series_matrix}.txt“ 这样的字符串字面量格式化（f-string）语法 glue函数

R 语言本身并不直接支持 Python 中 f“{series_matrix}.txt“ 这样的字符串字面量格式化（f-string）语法 glue函数

R 语言本身并不直接支持 Python 中 f"{series_matrix}.txt" 这样的字符串字面量格式化&#xff08;f-string&#xff09;语法。 在 R 中&#xff0c;要实现字符串拼接或格式化&#xff0c;你需要使用其他方法。下表对比了 Python f-string 和 R 中常见对应方法的主要…
阅读更多...
【AI智能体】亮数据MCP Server × Dify：AI智能体获取实时影音数据就是这么简单

【AI智能体】亮数据MCP Server × Dify：AI智能体获取实时影音数据就是这么简单

文章目录一、引言&#xff1a;AI 应用与实时影音数据的融合价值1、传统采集方式的痛点2、MCP Server 的创新价值二、亮数据 MCP Server 概览1、什么是 MCP Server&#xff1f;2、支持的影音平台和API接口3、产品特色亮点三、业务场景示例设计1、选定场景&#xff1a;竞品分析与…
阅读更多...
从《Attention Is All You Need》深入理解Transformer

从《Attention Is All You Need》深入理解Transformer

2017年的《Attention Is All You Need》论文提出的Transformer架构&#xff0c;不仅彻底改变了自然语言处理的格局&#xff0c;更为现代人工智能的发展奠定了坚实基础。本文将带你深入解析这一划时代模型的核心思想、技术细节及其深远影响。&#x1f504; 一、背景与动机&#…
阅读更多...
【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡

【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡

【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡引言本次二开布局没有变&#xff0c;但是下一次整体布局会有变&#xff0c;不过本次开发发现朋友圈跳转功能的流程步骤也做了一定的变化。原…
阅读更多...
心理调适与情绪管理实训室：支撑康养旅游人才心理能力培养

心理调适与情绪管理实训室：支撑康养旅游人才心理能力培养

在康养休闲旅游服务专业的教学体系中&#xff0c;心理调适与情绪管理实训室作为关键教学场所&#xff0c;承担着培养学生心理服务能力、情绪疏导技能和人际沟通素养的重要任务。随着社会对康养旅游服务质量要求的提升&#xff0c;具备心理调适与情绪管理能力的专业人才日益受到…
阅读更多...
Oracle sql tuning guide 翻译 Part 6 --- 优化器控制

Oracle sql tuning guide 翻译 Part 6 --- 优化器控制

第五部分优化器控制你可以用提示信息和初始化参数来影响优化器的判断和运作方式。Influencing the Optimizer Optimizer defaults are adequate for most operations, but not all.In some cases you may have information unknown to the optimizer, or need to tune the opti…
阅读更多...
pthread_mutex_lock函数深度解析

pthread_mutex_lock函数深度解析

摘要 pthread_mutex_lock是POSIX线程库中用于实现线程同步的核心函数&#xff0c;它通过对互斥锁的加锁操作来确保多个线程对共享资源的安全访问。本文从互斥锁的历史背景和发展脉络入手&#xff0c;详细解析了pthread_mutex_lock函数的设计理念、实现机制和使用场景。通过生产…
阅读更多...
qt QBoxSet详解

qt QBoxSet详解

1、概述QBoxSet 类代表箱形图中的一个条目。箱形条目是范围和由五个不同值构成的三个中值的图形表示。这五个值分别是&#xff1a;下极值、下四分位数、中位数、上四分位数和上极值。QBoxSet 提供了多种方法来设置和获取这些值&#xff0c;并且可以与 QBoxPlotSeries 和 QChart…
阅读更多...
机器学习势函数（MLPF）入门：用DeePMD-kit加速亿级原子模拟

机器学习势函数（MLPF）入门：用DeePMD-kit加速亿级原子模拟

点击 “AladdinEdu&#xff0c;同学们用得起的【H卡】算力平台”&#xff0c;注册即送-H卡级别算力&#xff0c;80G大显存&#xff0c;按量计费&#xff0c;灵活弹性&#xff0c;顶级配置&#xff0c;学生更享专属优惠。 引言&#xff1a;从传统分子模拟到机器学习势函数的革命…
阅读更多...
制作uniapp需要的storyboard全屏ios启动图

制作uniapp需要的storyboard全屏ios启动图

//锁定竖屏 plus.screen.lockOrientation("portrait-primary") // #endif首先准备启动图两个dc_launchscreen_portrait_background2x.png(750*1624)dc_launchscreen_portrait_background3x.png(1125*2436)LaunchScreen.storyboard文件内容如下<?xml version"…
阅读更多...
OpenCV：答题卡识别

OpenCV：答题卡识别

目录 一、项目原理 二、环境准备 三、核心代码实现 1. 导入必要库 2. 定义关键函数 坐标点排序函数 透视变换函数 轮廓排序函数 图像显示函数 3. 主程序实现 图像预处理 轮廓检测与答题卡定位 透视变换矫正 答案识别与评分 四、实现效果 本文将介绍如何使用 Ope…
阅读更多...
机器宠物（以四足宠物为主）四肢与关节的系统化设计指南

机器宠物（以四足宠物为主）四肢与关节的系统化设计指南

1. 目标与约束先行 目标&#xff1a;自然步态&#xff08;走/小跑/小跳&#xff09;、安全亲和、低噪、跌倒不致损&#xff1b;支持地毯/木地板/瓷砖等家庭地面。约束&#xff1a;体重 1–6 kg&#xff1b;单次续航 ≥ 30–60 min&#xff1b;整机成本与可维护性&#xff1b;室…
阅读更多...
spark hive presto doris 对substr函数的差异

spark hive presto doris 对substr函数的差异

Spark、Hive、Presto&#xff08;现更名为 Trino&#xff09;和 Doris&#xff08;原百度 Palo&#xff09;的 substr 函数在功能上都是用于截取字符串的子串&#xff0c;但在起始索引规则和参数含义上存在差异&#xff0c;这是导致结果不同的主要原因。以下是它们的具体区别&a…
阅读更多...
最新文章

Copyright @ 2022~2023