css 架构汇总

1. 网页布局

http://www.zhangxinxu.com/wordpress/2010/01/%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E6%80%9D%E6%83%B3%E6%B5%85%E8%AE%AE-%E6%B7%98%E5%AE%9D%E6%96%B0%E7%89%88%E9%A6%96%E9%A1%B5%E4%B8%BA%E5%AE%9E%E4%BE%8B/

流动布局:

宽屏的使用

使用寿命

模块化与重用

固定布局

布局精良

开发成本

腾讯的马化腾马老板将Google产品的特点总结为：文字化界面，极致简洁，排版清晰，重点突出。总结的很到位

整体布局和自适应布局的结合

外框固定宽度

内部宽度自适应,比如评论功能

一个实例:

http://www.zhangxinxu.com/study/taobao.html  taobao首页自适应(重构页面之响应式实现)

2. css代码重构

http://www.zhangxinxu.com/wordpress/2010/08/css%E9%A1%B5%E9%9D%A2%E9%87%8D%E6%9E%84%E4%B9%8B%E2%80%9C%E9%97%A8%E6%B4%BE%E2%80%9D%E4%B9%8B%E5%88%86/

页面重构权衡

兼容体验派 vs 扩展性能派

字符,图片模拟下拉框等等

比如处理按钮样式,用css处理,如果非要用图片,定义三种极限宽度的按钮.

流式布局思想下,会把width和padding分开,多套一层div,border也是类似处理

3. css渐进增强

http://www.zhangxinxu.com/wordpress/2010/08/css%E9%A1%B5%E9%9D%A2%E9%87%8D%E6%9E%84%E4%B9%8B%E2%80%9C%E9%97%A8%E6%B4%BE%E2%80%9D%E4%B9%8B%E5%88%86/

一些高级浏览器的效果更好

文字阴影

盒阴影

gradient渐变

选择器伪类

4. 其他文章

我是如何对网站CSS进行架构的

http://www.zhangxinxu.com/wordpress/2010/07/%E6%88%91%E6%98%AF%E5%A6%82%E4%BD%95%E5%AF%B9%E7%BD%91%E7%AB%99css%E8%BF%9B%E8%A1%8C%E6%9E%B6%E6%9E%84%E7%9A%84/

精简高效的CSS命名准则/方法

http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5%91%BD%E5%90%8D%E5%87%86%E5%88%99%E6%96%B9%E6%B3%95/

CSS的样式合并与模块化

http://www.zhangxinxu.com/wordpress/2010/07/css%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%90%88%E5%B9%B6%E4%B8%8E%E6%A8%A1%E5%9D%97%E5%8C%96/

去除冗余 – 精简您的CSS样式代码

http://www.zhangxinxu.com/wordpress/2010/02/%E5%8E%BB%E9%99%A4%E5%86%97%E4%BD%99-%E7%B2%BE%E7%AE%80%E6%82%A8%E7%9A%84css%E6%A0%B7%E5%BC%8F%E4%BB%A3%E7%A0%81/

CSS reset的重新审视 – 避免样式重置

http://www.zhangxinxu.com/wordpress/2010/04/css-reset%E7%9A%84%E9%87%8D%E6%96%B0%E5%AE%A1%E8%A7%86-%E9%81%BF%E5%85%8D%E6%A0%B7%E5%BC%8F%E9%87%8D%E7%BD%AE/

CSS样式分离之再分离

http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5%86%8D%E5%88%86%E7%A6%BB/