参考链接
关于CSS Reset 那些事(一)之 历史演变与Normalize.css
摘抄
1 CSS代码重构的基本方法
1.1 提高CSS性能的手段(有待实践总结)
- 尽量将样式写在单独的css文件里面,在head元素中引用
- 不使用@import
- 避免使用复杂的选择器,层级越少越好
- 精简页面的样式文件,去掉不用的样式
- 利用CSS继承减少代码量
1.2 提高可维护性的方法
- 命名与备注
头: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
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
- 提取重复样式(待实践)
- 书写顺序(下面是推荐的CSS书写顺序)
(1)位置属性(position, top, right, z-index, display, float等)
(2)大小(width, height, padding, margin, border)
(3)文字系列(font, line-height, letter-spacing, color, text-align等)
(4)背景(background)
(5)其他(animation, transition等)
2 CSS方法论
2.1 OOCSS(待实践)
- 结构和样式分离
- 容器和内容分离
2.2 SMACSS
- Base,定义基础样式。推荐使用
Normalize.css - Layout,布局样式。布局和模块(module)之间的界线太模糊,建议作为一种特殊的模块保留
- Module,模块。建议使用BEM命名思想
- State,状态样式。
- Theme,皮肤样式。
2.3 BEM
- 用好BEM命名的关键是模块的抽离与独立
- 善用命名空间(下面是常用命名空间)(详情点击:具有命名空间的更透明的UI代码)

- 抽离出一套处理状态的挂钩(下面是一套挂钩)(详情点击:状态钩子)
