网站通用样式的代码量在整个CSS文件中所占据的比重是相当大的，如果您的CSS文件中发现CSS通用样式只占整个CSS文件的一小部分，尤其网站项目较大时，那就需要引起警惕，可能最后的结果就是CSS文件超负荷，最后反而一团糟。

11、网站公共结构样式
所谓“网站的结构样式”主要指的是最外框div的样式，一般限制网站的宽度(960~990不等)，还有就是网站的分栏布局样式，这里的样式仅仅针对主体结构，例如left_part，或是right_part；还包括网站的头部的一些公用结构，底部的样式结构等。

我是强烈建议公共结构仅仅定宽定高，设置浮动属性，切不可在结构样式上添加margin或是padding属性，这会使网站的公共结构的重用性大大降低！

12、单页面的精细结构
如果上述11项您都架构的非常好，那么您在编写每个具体页面的时候，就会非常轻松，非常迅速。因为80%~90%的样式都可以从上面11项中直接拿来用（上述11项全部都是网站公用样式）。

对于中型大型网站，我们可能要花3~4天甚至更多的时间分析页面设计图，处理CSS Sprite，架构网站的CSS，这段时间不写任何页面，就是处理网站（可以说是）唯一的CSS文件。所谓“磨刀不误砍柴功”，站在整站的角度上去思考 CSS是非常重要的，这可以让你避免迷路，有助于写出精简高效的样式代码。

当我们把1-11项都完成了，就开始着手写页面了，这时候，整个网站的页面基本上都在你脑中了，您在下手的时候就会清除：我现在做的是哪个页面，在 整个网站中扮演着什么样的地位，这个页面的CSS对整个网站的CSS有什么影响，这里的样式该怎么处理（分离，合并还是独立）等。

一般而言，就我个人经验，每个页面，即使这个页面看上去很复杂，其代码开销也是非常小的。其新增的代码开销去处有三处：一是分离一些样式归入“网站 CSS样式库”中；二是凡事使用的CSS Sprite的样式与其他样式进行合并；三就是一些精细的复杂的样式，这些就是CSS文件的架构的最后一部分“单页面的精细结构了”，何为单页面的精细结 构，如下图的样式，就可以说是精细结构，需要独立出来新写样式（可适当分离，注意“适当”一词）：

例如上图鼠标经过后显示，红色虚框样式，剪刀，粗边框投影，最优惠标示，一些按钮等就属于精细结构，我们需要在页面上单独写一个样式。虽然理论上， 我们使用分离也是可以实现这个效果的，但是此时html代码的开销实在太大，根本就不适合使用分离，这里就该老老实实的写样式。这里的写法，命名都应该跟 随内容而不是属性本身。我们可以在单一类别的页面使用同样的前端的前缀避免样式冲突等~~

本文原地址：?p=944，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。

本文作者：张鑫旭，欢迎访问我的个人网站。

有些东西虽然看上去好，但是却不适用。通过上述的CSS架构，我可以把网站的样式控制地非常的精简与高效（当然，需要设计师与后台工程师的通力配 合），但是，对于别人，套用此架构可能就没有这样的效果，可能反而会更糟。前面也提到了，这种架构是我自己摸索出来的，是根据自己的写法，布局思想，甚至 性格等形成的，带有明显的个人印记。

比方说，我是个推崇自适应布局（流体布局）的人，是个十足的自适应控，但是，有很大一部分同行是固定布局（像素级兼容，有计算）。固定布局固然有其优点，但是其CSS代码的消耗量以及页面的扩展性我是很诟病的，显然，这是无法应用到我这里的架构中的。

其次，不少CSS刚入门的页面开发工程师对CSS属性理解不够透彻，常会写一些没有必要的冗余代码。对于他们而言，但CSS文件的架构确实很吃力。

说实话，我对自己的这个CSS架构的适应性都不看好，一是自己在表达方面的火候欠缺，没有很好的展示架构的精髓，二是因为此架构本身需要有很多的控 制，这种控制受制于设计师，网站页面架构，CSS工程师自身的功力，一旦样式泛滥，这种架构也就毫无意义，反而弄巧成拙；但是，一旦控制下来，那么网站就 CSS性能这块保证领先，而这些需要优秀的有眼界的CSS工程师来掌控，需要优秀的设计师，程序员通力协作。虽然全然套用我展示的这套架构会由于不熟悉或 是掌控不够而产生问题，但是，里面一些概念，一些思想应该能有一定的启示作用的，这也是本文的意义所在了。

我只是个初出茅庐的小生，我知道，很多真正功力深厚的前端开发人员有着更好的更广泛适应的前端架构，如果您有幸来到这里，欢迎分享您的一些见解与认 识。还有，文中若有您觉得不合理的观点，也非常欢迎通过评论或是邮件(zhangxinxu@zhangxinxu.com)的方式进行指正。我们需要在 不断的交流中提高的。

本文转载自张鑫旭-鑫空间-鑫生活[