书写css的时候是有先后顺序的,可以增强代码的阅读体验。下面是我做出的一些总结:
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.背景(background, border等)
4.文字系列(font, line-height, letter-spacing, color- text-align等)
5.其他(animation, transition等css3属性)
.div2{
border: 20px solid #E6CAFF;
width: 350px;
height: 260px;
position: absolute;
right: 20px;
bottom:40px ;
padding: 20px 30px;
text-align: center;
}
上面这种写法是不符合规范
的, 符合规范的代码如下
.div2{
z-index: 2;
position: absolute;
right: 20px;
bottom:40px ;
width: 350px;
height: 260px;
margin-left: 20px;
padding: 20px 30px;
background: #e2f4fc;
border: 20px solid #E6CAFF;
line-height: 20px;
text-align: center;
font-weight: bold;
font-size: 16px;
color: #464646;
/* css3属性 */
box-sizing: border-box;
}
6. 可以去掉小数点后面的"0"
.div2{
background: rgba(0,0,0,0.2)
}
/**正确示例**/
.div2{
background: rgba(0,0,0,.2)
}
7. 不要随意使用id
id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。
#div2{
background: rgba(0,0,0,0.2)
}
/**正确示例**/
.div2{
background: rgba(0,0,0,.2)
}
8. 16进制颜色代码缩写
有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主(不能缩写的就不过多赘述了)
.div2{
background: #FFFFFF
}
/**正确示例**/
.div2{
background: #FFF
}
9. 连字符CSS选择器命名规范
长名称或词组可以使用短横线来为选择器命名。(不建议使用下划线命名)
.title_box{
background: #FFFFFF
}
/**正确示例**/
.title-box{
background: #FFF
}
常用命名
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签:tags
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary