笔记--CSS代码重构与优化

288 阅读2分钟

参考链接

CSS代码重构与优化之路

如何使用Sass和SMACSS维护CSS

关于BEM中常见的十个问题以及如何避免

关于CSS Reset 那些事(一)之 历史演变与Normalize.css

具有命名空间的更透明的UI代码

状态钩子

摘抄

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

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