按照css的性质和用途，我们可以将css文件分成：

• 公共型样式

• 特殊型样式

• 皮肤型样式

并以此为顺序引用。

那么他们分别是什么呢？

• 公共型样式是最为重要的部分，对于比较小的项目，我们只引入一个css，这个css的样式即公共型样式，一般包括：“标签的重置和设置默认值”（以消除不同浏览器之间的差异）、“统一调用背景图和清理浮动或者其余需统一解决的长样式（这样就无需对每个进行分别的解决）”、“网站通用布局”、“通用板块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。后面会具体详情。

• 特殊型样式即对某个维护率较高的栏目或者者某个与网站整体差异较大的页面独立引入这样一个特殊型样式，方便我们维护。

• 皮肤型样式即产品需要换肤功能，那么我们就需要将颜色、背景等抽离出来放在这里，方便管理。

css文件我们分为了公共型样式、特殊型样式、皮肤型样式，那么在css文件的内部我们又是怎样分类的呢？（此部分为重点）

• 重置和默认的css代码。 这是为了消除默认样式和浏览器的差异，并设置部分标签的初始样式，**以减少后面的重复劳动。 **你可以根据自己的网站需求设置，这一部分代码放在css内部的最上面。

• 统一解决的css代码。 **这里可以统一调用背景图和清理浮动（指通用性较高的布局、板块、原件内的清楚）

• 布局（grid）: 我们将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等。常用！

• 板块（module）：即语义化的可以重复使用的较大的整体。如导航、登陆、注册、列表、评论、搜索等。常用！

• 元件（unit）：通常是一个不可再分的较为小巧的个体，被重复用于各种板块中，比方按钮、输入框、loading、图表等。常用！

• 功能（function）：为方便少量常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具备固定样式体现，比方清理浮动。不常用，不可滥用！

• 皮肤（skin）：对于换肤型网站需要使用，将皮肤型的样式抽离出来，非换肤型网站不可滥用，不常用。

• 状态(state):即少量状态类样式。不常用。