———————- 加微信和老王聊技术、聊产品、 聊运营。 定期组织主题性远程语音讨论。 进群加微信 技术微信群： 加微信：wonter 发送：技术Q 医疗微信群： 加微信：wonter 发送：医疗Q
———————-
推荐阅读：
CSS 作为网页样式的描述语言，在百度一直有着广泛的应用。本文档的目标是使 CSS 代码风格保持一致，容易被理解和被维护。
虽然本文档是针对 CSS 设计的，但是在使用各种 CSS 的预编译器(如 less、sass、stylus 等)时，适用的部分也应尽量遵循本文档的约定。
2 代码风格
解释：
UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。
示例：
示例：
示例：
示例：
解释：
常见不可分割的场景为URL超长。
示例：
示例：
示例：
解释：
不允许使用单引号，不允许不使用引号。
示例：
示例：
示例：
3 通用
解释：
在性能和维护性上，都有一定的影响。
示例：
示例：
示例：
解释：
border / margin / padding 等缩写会同时设置多个属性的值，容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值，则应该分开设置。
示例：
解释：
- Formatting Model 相关属性包括：
position/top/right/bottom/left/float/display/overflow等 - Box Model 相关属性包括：
border/margin/padding/width/height等 - Typographic 相关属性包括：
font/line-height/text-align/word-wrap等 - Visual 相关属性包括：
background/color/transition/list-style等
另外，如果包含 content 属性，应放在最前面。
示例：
解释：
触发 BFC 的方式很多，常见的有：
- float 非 none
- position 非 static
- overflow 非 visible
另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。
解释：
必须注意的是，仅在设计上 确实不允许任何其它场景覆盖样式 时，才使用内联的 !important 样式。通常在第三方环境的应用中使用这种方案。下面的 z-index 章节是其中一个特殊场景的典型样例。
解释：
同层的多个元素，如多个由用户输入触发的 Dialog，在该层级内使用相同的 z-index 或递增 z-index。
建议每层包含100个 z-index 来容纳足够的元素，如果每层元素较多，可以调整这个数值。
解释：
可控环境分成两种，一种是自身产品线环境；还有一种是可能会被其他产品线引用，但是不会被外部第三方的产品引用。
不建议取值为 2147483647。以便于自身产品线被其他产品线引用时，当遇到层级覆盖冲突的情况，留出向上调整的空间。
解释：
第三方环境对于开发者来说完全不可控。在第三方环境下的元素，为了保证元素不被其页面其他样式定义覆盖，需要采用此做法。
4 值与单位
解释：
文本类型的内容可能在选择器、属性值等内容中。
示例：
示例：
示例：
示例：
示例：
解释：
带有alpha的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。
示例：
示例：
示例：
示例：
解释：
示例：
5 文本编排
解释：
所谓英文 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
示例：
解释：
示例：
示例：
解释：
由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。
解释：
由于中文字体没有 italic 风格的实现，所有浏览器下都会 fallback 到 obilique 实现 (自动拟合为斜体)，小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差，造成阅读困难。
解释：
CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。
示例：
解释：
将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置 line-height。
当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致。
示例：
6 变换与动画
示例：
解释：
transform: translate(npx, npx);transform: scale(n);transform: rotate(ndeg);opacity: 0..1;
典型的，可以使用 translate 来代替 left 作为动画属性。
示例：
7 响应式
示例：
示例：
8 兼容性
解释：
标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。
示例：
解释：
如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式，则不应该使用 hack 手段解决问题。通常 hack 会导致维护成本的增加。
解释：
尽量使用符合 CSS 语法的 selector hack，可以避免一些第三方库无法识别 hack 语法的问题。
示例：
示例：
Original: https://www.cnblogs.com/Javame/p/14681551.html
Author: CTO老王
Title: CSS编码规范
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/537026/
转载文章受原作者版权保护。转载请注明原作者出处！