前端命名

1、避免单个css文件过大（少于300行）
2、命名是使用通用名称表改元素不表特定意义
3、id和class越简短越好，但是前提是要别人一看能理解
4、命名采用小写和中划线-，不能使用大写和下划线
5、为了提高代码的复用性，样式尽量采用组合的方式

页面结构

*容器——container
*页头——header
*内容——content
*页面主体——main
*页尾——footer
*侧栏——sidebar
*栏目——column
*页面外围控制整体布局宽度——wrapper
*左右中——left right center

导航

*导航——nav
*主导航——mainnav
*子导航——subnav
*顶导航——topnav
*边导航——sidebar
*左导航——leftsidebar
*有导航——rightsidebar
*菜单——menu
*子菜单——submenu
*标题——title
*摘要——summary

功能

*标志——logo
*广告——banner
*登录——login
*登录条——loginbar
*注册——regsiter
*搜索——search
*功能区——shop
*标题——title
*加入——joinus
*状态——status
*按钮——btn
*滚动——scroll
*标签页——tab
*文章列表——list
*提示信息——msg
*当前的——current
*小技巧——tips
*图标——icon
*注释——note
*指南——guild
*服务——service
*热点——hot
*新闻——news
*下载——download
*投票——vote
*合作伙伴——partner
*友情链接——link
*版权——copyright

属性编写顺序

显示属性：display/list-style/position/float/clear...
自身属性/盒模型：width/height/margin/padding/border
背景：background
行高：line-height
文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content....
其他：cursor/z-index/zoom/overflow
CSS3属性：transform/transition/animation/box-shadow/border-radius
css3属性必须写-webkit- / -moz- / -ms- / -o- 标准属性写在后面

性能优化

1、尽量使用缩写（属性）
2、选择器尽量避免嵌套，减少查询消耗
3、选择器性能，越具体的关键选择器性能越好（id——>class——>标签选择器——>相邻选择器——>子选择器——>后代选择器——>*——>属性选择器——>伪选择器）
4、0后面不要带单位，0px写成0,0.8px写成.8px
5、颜色取值要大写，并且尽量用三位数表示