前端代码规范——CSS代码规范
文章目录
- CSS代码规范
- 1.命名规范
- 1.1 block
- 1.2 Element
- 1.3 Modifier
- 2 代码风格
- 3 通用
- 3.1 选择器
- 3.2 属性缩写
- 3.3 清除浮动
- 3.4 !important
- 3.5 z-index
- 4 值与单位
- 4.1 文本
- 4.2 数值
- 4.3 url()
- 4.4 长度
- 4.5 颜色
- 4.6 2D 位置
- 5 文本编排
- 5.1 字号
- 5.2 字重
- 5.3 行高
- 6 变换与动画
CSS代码规范
1.命名规范
CSS的命名规范也称作BEM规范,为的就是结束混乱的命名方式,达到一个语义化的css命名方式
1.1 block
- 负责描述功能的
.header {
}.header--select {
}
- 不能使用元素选择器和ID选择器
/* good */
.header {
}/* bad */
.header a {
}
1.2 Element
- 是用一个双下划线隔开
/* good */
.header__body {}/* bad */
.header .body {}
- 表示的是目的,而不是状态,如下例子:目的是在header下面定义三个区域 body、logo、title,但是并没有指定任何状态。
.header__body {}.header__logo {}.header__title {}
- 不能脱离Block父级单独使用
/* good */
<header class="header"><p class="header__body"></p>
</header>/* bad */
<header><p class="header__body"></p>
</header>
1.3 Modifier
- 表示的是一个状态,是用双横杠分开的。
.header__button--default {}
- Boolean
.header__button {}.header__button--selected {}
- 枚举
.header__button--primary {}.header__button--warning {}
- 不能单独使用
/* good */
<p class="header"><p class="header__body"><button class="header__button header__button--primary"></button><button class="header__button header__button--default"></button></p>
</p>/* bad */
<p><p><button class="header__button--primary"></button><button class="header__button--default"></button></p>
</p>
2 代码风格
【强制】与 prettier 保持一致
3 通用
3.1 选择器
[强制] 如无必要,不得为 id、class 选择器添加类型选择器进行限定。
解释:
在性能和维护性上,都有一定的影响。
示例:
/* good */
#error,
.danger-message {font-color: #c00;
}
/* bad */
dialog#error,
p.danger-message {font-color: #c00;
}
[建议] 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。
示例:
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
3.2 属性缩写
[建议] 在可以使用缩写的情况下,尽量使用属性缩写。
示例:
/* good */
.post {font: 12px/1.5 arial, sans-serif;
}
/* bad */
.post {font-family: arial, sans-serif;font-size: 12px;line-height: 1.5;
}
[建议] 使用 border / margin / padding 等缩写时,应注意隐含值对实际数值的影响,确实需要设置多个方向的值时才使用缩写。
解释:
border / margin / padding 等缩写会同时设置多个属性的值,容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值,则应该分开设置。
示例:
/* good */
.page {margin-right: auto;margin-left: auto;
}
.featured {border-color: #69c;
}
/* bad */
.page {margin: 5px auto; /* introducing redundancy */
}
.featured {border: 1px solid #69c; /* introducing redundancy */
}
3.3 清除浮动
[建议] 当元素需要撑起高度以包含内部的浮动元素时,通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。
3.4 !important
在业务代码中强制不能使用 !important,除公共样式之外。
3.5 z-index
[建议] 将 z-index 进行分层,对文档流外绝对定位元素的视觉层级关系进行管理。
4 值与单位
4.1 文本
[强制] 文本内容必须用双引号包围。
4.2 数值
[强制] 当数值为 0 - 1 之间的小数时,省略整数部分的 0。
示例:
/* good */
panel {opacity: .8
}
/* bad */
panel {opacity: 0.8
}
4.3 url()
[强制] url() 函数中的路径不加引号。
示例:
body {background: url(bg.png);
}
4.4 长度
[强制] 长度为 0 时须省略单位。 (也只有长度单位可省)
示例:
/* good */
body {padding: 0 5px;
}
/* bad */
body {padding: 0px 5px;
}
4.5 颜色
[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
解释:
带有alpha的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。
示例:
/* good */
.success {box-shadow: 0 0 2px rgba(0, 128, 0, .3);border-color: #008000;
}
/* bad */
.success {box-shadow: 0 0 2px rgba(0,128,0,.3);border-color: rgb(0, 128, 0);
}
[强制] 颜色值可以缩写时,必须使用缩写形式。
示例:
/* good */
.success {background-color: #aca;
}
/* bad */
.success {background-color: #aaccaa;
}
[强制] 颜色值不允许使用命名色值。
示例:
/* good */
.success {color: #90ee90;
}
/* bad */
.success {color: lightgreen;
}
[建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。
ps: 这条规则可能与最新脚手架工程可能有冲突,因为最新版的工程规则不允许写大写字母
示例:
/* good */
.success {background-color: #aca;color: #90ee90;
}
/* good */
.success {background-color: #ACA;color: #90EE90;
}
/* bad */
.success {background-color: #ACA;color: #90ee90;
}
4.6 2D 位置
[强制] 必须同时给出水平和垂直方向的位置。
解释:
2D 位置初始值为 0% 0%,但在只有一个方向的值时,另一个方向的值会被解析为 center。为避免理解上的困扰,应同时给出两个方向的值。background-position属性值的定义
示例:
/* good */
body {background-position: center top; /* 50% 0% */
}
/* bad */
body {background-position: top; /* 50% 0% */
}
5 文本编排
5.1 字号
[强制] 需要在 Windows 平台显示的中文内容,其字号应不小于 12px。
解释:
由于 Windows 的字体渲染机制,小于 12px 的文字显示效果极差、难以辨认。
5.2 字重
[强制] font-weight 属性必须使用数值方式描述。
示例:
/* good */
h1 {font-weight: 700;
}
/* bad */
h1 {font-weight: bold;
}
5.3 行高
[建议] line-height 在单行的时候使用1,多行的时候使用具体数值
示例:
.container {line-height: 1.5;
}
6 变换与动画
[强制] 使用 transition 时应指定 transition-property。
示例:
/* good */
.box {transition: color 1s;transition-property: color, border-color;transition-duration: 1s, 2s;
}
/* bad */
.box {transition: all 1s;
}
[建议] 尽可能使用transition 做动画变换,不会引起浏览器的重排
示例:
/* good */
.box {transition: transform 1s;
}
.box:hover {transform: translate(20px); /* move right for 20px */
}
/* bad */
.box {left: 0;transition: left 1s;
}
.box:hover {left: 20px; /* move right for 20px */
}
前端代码规范——CSS代码规范相关推荐
- 前端常用得CSS代码分享
本文首发于公众号:执行上下文,同步更新个人博客:执行上下文,转载请署名.代码不断更新中!! 前提 2019年11月的最后一篇文章来拉,在日常开发中高频使用的CSS代码分享给大家,其中可能有很多大家经常 ...
- 前端常用的CSS代码
本文首发于公众号:小夭同学,同步更新个人博客:故事胶片,转载请署名.代码不断更新中!! Demo 代码Demo 补充 大家如果有常用的也可以分享出来鸭!!! 前提 日常开发中高频使用的CSS代码分享给 ...
- web项目开发 之 前端规范 --- CSS编码规范
此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范 文档.供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力. 转载请注明出处:JS前端实用开 ...
- vw 前端_一行css代码轻松实现前端响应式布局(vw+rem)
大家知道rem可以用来做响应式布局,只是html元素上的font-size样式需要根据屏幕宽度来指定. 之前有用@media媒体查询,根据各种屏幕宽度写html的样式,也用过类似lib-flexibl ...
- html 图片怎么改颜色代码,两行 CSS 代码实现图片任意颜色赋色技术
原标题:两行 CSS 代码实现图片任意颜色赋色技术 || 很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术,当时惊为天人,感慨还可以这样玩,私底下也曾多次想过有没有其他方 ...
- html气球飘落代码,纯CSS代码实现各类气球泡泡对话框效果
一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一点图片都没有哦.看到这里,你是不是跟我一样 ...
- html格式标准写法,web前端HTML、CSS书写规范(必记)
1.规范目的: 使开发流程规范化,代码简洁.美观. 2.文件规范: 文件名用英文单词,多个单词用驼峰命名法. 例如:MaginLeft... 一些浏览器会将含有这些词的作为广告拦截,文件命名.ID.C ...
- 前端常用的CSS代码块
1.垂直居中对齐 .vc {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); } .vc {positio ...
- Emmet:HTML/CSS代码快速编写规范(转发)
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
最新文章
- html文章整体居中,div居中与div内容居中
- 复现经典:《统计学习方法》第 8 章 提升方法
- 黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)
- linux需要检测的系统资源不足,细说Linux 系统优化
- leetcode14. 最长公共前缀
- MyBatis Generator作为maven插件自动生成增删改查代码及配置文件例子
- SPSS16 视频教程 共17章全
- linux安装 web2py,在Linux上使用web2py_uwsgi_nginx搭建web服务器
- SAP 生产成本明细报表
- Ubuntu 16.04 64位 安装 modelsim
- mysql表关联查询都有什么方式_所有关联表查询方式
- 计算机电缆线对成缆系数,电线电缆的成缆系数是什么含义?
- R语言使用plot函数可视化数据散点图,使用title函数为可视化图像设置自定义标题名称、自定义adj参数将标题向右侧移动
- 仙剑5手游服务器维护,《仙剑奇侠传》手游维护内容官方解答
- CSS样式关键字initial、inherit、unset、revert和all
- 大数据、快速数据和数据湖概念
- 电脑使用越来越慢,如何解决
- 我爱我妻——可以让男人看一遍哭一遍的文章!
- JAVA:实现binary exponentiation二进制幂运算算法(附完整源码)
- .globl _start 简介