CSS规范
1.命名规则
- 所以的命名最好都小写。
- 尽量使用英文命原则。
-
尽量不缩写,除非一看就明白的单词,如:
btn、nav
。 -
命名方式(
BEM
):类-体(例:
g-head
)、类-体-修饰符(例:
u-btn-active
)。 - scss中的变量、函数、混合、placeholder采用驼峰式命名。
- 减少id命名,id在JS是唯一的,不能多次使用,id的优先级优先与class,所以id应该按需使用,而不能滥用。
2.样式命名
2.1 网页外层重要部分
● [建议]
warp------------用于最外层
header----------用于头部
main------------用于主体内容(中部)
main-left-------用于左侧布局
main-right------用于右侧布局
nav-------------网页菜单导航条
content---------网页中部主体
footer----------用于底部
2.2连字符CSS选择器命名规范
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。
- 输入的时候少按一个shift键。
- 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)。
- 能良好区分JavaScript变量命名(JS变量命名是用“_”)。
3.代码规范
3.1 编码
● [建议] CSS文件使用UTF-8编码。
@charset "utf-8";
/* 下面为样式内容 */
解释: UTF-8 编码具有更广泛的适应性。
3.2 使用CSS缩写属性
CSS有些属性可以缩写,比如
padding,margin,font
等等,这样精简代码同时又能提高用户的阅读体验。
/*
CSS有些属性是可以缩写的,比如padding,margin,font等等,
这样精简代码同时又能提高用户的阅读体验
*/
/* good */
.example {
border-top:0;
font:100%/1.6 serif;
padding:0 1em 2em;
}
/* bad */
.example{
border-top-style:none;
font-family:serif;
font-size:100%;
line-height:1.6;
padding-bottom:2em;
padding-left:1em;
padding-right:1em;
padding-top:0;
}
3.3 样式属性顺序
-
定位:
position z-index left right top bottom clip
等。 -
自身属性:
width height min-height max-height min-width max-width
等。 -
文字样式:
color font-size letter-spacing, color text-align
等。 -
背景:
background background-image background-color
等。 -
文本属性:
background background-image background-color background-size
等。 -
css3中属性:
content、box-shadow、animation、border-radius、transform
等。
/* good */
.example {
z-index: -1;
display: inline-block;
font-size: 16px;
color: red;
background-color: #eee;
}
/* bad */
.example {
color: red;
background-color: #eee;
display: inline-block;
z-index: -1;
font-size: 16px;
}
/* 目的:减少浏览器reflow(回流),提升浏览器渲染dom的性能。*/
3.4 去掉小数点前的“0”
/* good */
.example{
font-size:.8em;
}
/* bad */
.example{
版权声明:本文为QAmazing原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。