CSS通用编码规范 - kingzhi
程序员文章站
2022-04-14 18:32:12
...
CSS通用编码规范
总结一部分前端编码规范,CSS部分先奉上,大多比较通用,应该是主流方式吧。
1 前言
本文档的目标是使 CSS 代码在团队中风格保持一致,容易被理解和被维护。
尽管本文档是针对 CSS 设计的,但是在使用各种 CSS 的预编译器(如 less、sass、stylus 等)时,适用的部分也应尽量遵循本文档的约定。
2 CSS命名方式
- 保持 class 命名为全小写,可以使用短划线(不要使用下划线和 camelCase 驼峰式命名)
- 短划线应该作为相关类的自然间断。(例如,.btn 和 .btn-blue)。
- 避免过度使用简写。.btn 可以很好地描述 button,但是 .t 不能代表任何元素。
- class 的命名应该尽量短,也要尽量明确。
- 使用有意义的名称;使用结构化或者作用目标相关,而不是抽象的名称。
- 全局通用命名时,需要加特定前缀如 `zk-wrap`
- 局部命名时,可以根据模块内容或就近父节点为前缀
3 CSS基础设施
- 编码格式:文件编码格式 `UTF-8` 编码,在CSS文件顶格位置申明文档的编码charset
@charset "utf-8";
4 编码风格
- 缩进方式:使用
4
个空格做为一个缩进层级,不允许使用2
个空格 或tab
字符。 -
空格
-
选择器
与{
之间必须包含空格。 -
属性名
与之后的:
之间不允许包含空格,:
与属性值
之间必须包含空格。 -
列表型属性值
书写在单行时,,
后必须跟一个空格。
-
-
选择器
- 如无必要,不得为
id
、class
选择器添加类型选择器进行限定。 - 选择器的嵌套层级应不大于
3
级,位置靠后的限定条件应尽可能精确 -
>
、+
、~
选择器的两边各保留一个空格。
- 如无必要,不得为
-
属性
- 属性定义必须另起一行。
- 属性定义后必须以分号结尾。
- 在可以使用缩写的情况下,尽量使用属性缩写。
-
属性前缀,标准属性放在最后,按冒号对齐方便阅读,也便于在编辑器内进行多行编辑。
.box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
-
属性书写顺序: 位置 > 盒模型 > 排版 > 外观 > 其它
-
Positioning 位置
// 包括 float、display、overflow…… position: absolute; top: 50px; left: 0; overflow-x: hidden;
-
Box model 盒模型
border: 1px solid #000 margin: 20px; padding: 15px; width: 240px; height: 160px;
-
Typographic 排版
font-size: 16px; line-height: 32px; text-align: left; word-wrap: break-word
-
Visual 外观
background: #fff url(images/logo.png) no-repeat; color: #000;
-
-
清除浮动
当子内容 float 浮动后,父级标签一定要清除浮动,通过对伪类设置clear
的方式进行clearfix
。尽量不使用增加空标签的方式。[参看]// css .clearfix::after { clear: both; content: ""; display: table; }
-
颜色
- RGB颜色值必须使用十六进制记号形式
#rrggbb
。不允许使用rgb()
。 - 颜色值可以缩写时,必须使用缩写形式,
border-color: #ccc;
- 颜色值不要使用英文命名色值,如
color:red
- 颜色值最好全部采用小写字符
- RGB颜色值必须使用十六进制记号形式
-
数值
- 当数值为0时,可以省略单位,
padding: 0; margin: 0;
- 当数值为 0 - 1 之间的小数时,省略整数部分的
0
,如opacity: .8;
- 当数值为0时,可以省略单位,
-
z-index 一般以 5或10 为一个步长(如50,60,70),方便以后增加或修改
-
!important' 尽量不使用
!important
声明。 -
字体
-
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用法 h1 { font-family: "Microsoft YaHei"; }
-
-
字号
- 需要在 Windows 平台显示的中文内容,其字号应不小于
12px
。
- 需要在 Windows 平台显示的中文内容,其字号应不小于
-
字重
- CSS 的字重分 100 – 900 共九档,但目前受字体本身质量和浏览器的限制,实际上支持
400
和700
两档,分别等价于关键词normal
和bold
- CSS 的字重分 100 – 900 共九档,但目前受字体本身质量和浏览器的限制,实际上支持
-
行高
-
line-height
默认全局定义为 1.5 比较舒适,可根据实际情况调整
-
-
Hack 针对某个浏览器写的样式或某个浏览器BUG的样式,必须加上注释说明
// css .clearfix{ zoom:1; /* for IE6 IE7 */ }
上一篇: 跟着辛星认识一下PHP的自动加载
推荐阅读
-
CSS编码规范
-
html5+CSS3的编码规范
-
前端编码风格规范之 HTML 规范_html/css_WEB-ITnose
-
前端编码规范(1)-- 一般规范_html/css_WEB-ITnose
-
【前端】#001 编码规范_html/css_WEB-ITnose
-
HTML CSS编码规范(黄金定律)
-
编码规范之编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范_html/css_WEB-ITnose
-
CSS通用编码规范_html/css_WEB-ITnose
-
前端编码规范(4)-- CSS 和 Sass (SCSS) 规范_html/css_WEB-ITnose
-
【前端】#001 编码规范_html/css_WEB-ITnose