背景：一个小项目，大概设计10个页面，写demo老总没有给我设计，全部口头，交代，页面样式参照，以及交互要求。起初为了方面，以及页面关联内容分割不明确，我把CSS,JS代码全部写入页面内，内联。初版完成之后，老总要我代码优化重构，很头痛，老总要求完美。但是我对这方面认识使用觉得自己能力不足够，于是乎上网一顿搜索，看了几天的博文，同时也在看CSS相关书，摘抄了一些笔记记录，以及一些优化的思路。
1.em单位布局。很多文章提出使用em单位布局，让页面兼容性更好，弹性空间更大。
2.命名。我最头痛的点，如何命名各个ID,class，什么时候用ID更好，什么时候用class更好。
3.如何能更好的重用代码。
在面临重构问题，我想到很多问题，一下子思路有点乱，首先就是命名，各种观点不一样，我想用易懂，通用，于是乎开始是很不表标准的拼音，然后层级多了，各种叠加，拼音十分长，很乱，我自己看到代码都头痛。很不方便。在什么时候用ID更好，什么时候用class更好。这点上，和如何能更好的重用代码。有相关。
解答：2.命名。我最头痛的点，如何命名各个ID,class，什么时候用ID更好，什么时候用class更好。相关文章推荐《精简高效的CSS命名准则/方法http://www.zhangxinxu.com/wordpress/?p=1098》来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
CSS问题总结：
一.面向属性命名；
精简高效CSS命名三点：
1.NO ID
2.NO 辈份层级
3.NO 标签
二.通用样式库；
通用样式如何架构：
1.网站常见颜色，尤其是连接颜色，
2.网站常见背景颜色（bg+颜色前2位）
3.常见边框颜色
4.遗留的单margin属性（注意遗留二字）
5.遗留的padding属性
6.遗留的width属性（在阅读的CSS设计指南等书籍中都指出宽度，尽量使用100%，给外部容器，设定宽度，这样维护方便。）
7.网站的常用的一些height（CSS书中对定高和定宽都有比较详细的介绍，好处在使用中能体会到）
8.注意：网站通用的一些元素：按钮，导航，选项卡，千万别做分离CSS样式库。
9.额外：在一篇文章中看到，视觉样式和功能样式分离，在看某些网站中有某元素，同时使用ID 和class，一个控制视觉样式，一个控制功能样式的情况。
10.不对通用元素进行分离；
三.重用：拿到原型图，首先要对网站整体进行页面分析，把页面模块化，拆分，组合。可以提炼出重用部分。
我在重构我代码的时候，我在外部容器使用ID，内部大部分使用class。
四.优化：
CSS命名过长，影响CSS文件大小，占用字节。（可能减少CSS大小，例如，PHP同时可以在服务器端使用gzip技术压缩。）
CSS后代选择器过多，降低渲染速度。因为浏览器机制，不同。这点引用文章提出了，同时推荐《WebKit技术内幕朱永盛》了解浏览器的工作方式也是很不错的拓展阅读。
页面尽量减少请求数，例如CSS打包到一个文件，因为每个文件都会生成一个请求。