在这里可以将网站内的所有样式，按照职能分成三大类:base、common和page。一般情况下，任何一个网页的最终表现都是由这三者共同完成的。这三者不是并列结构，而是层叠结构，如下图所示。
1.base层
这一层位于三者的最底层，提供 CSS reset功能和粒度最小的通用类–原子类这一层会被所有页面引用，是页面样式所需依赖的最底层。这一层与具体UI无关，无论何种风格的设计都可以引用它，所以base层要力求精简和通用，如果将用css控制页面样式比喻为建房子，这一层的核心职能是为房子打好地基( CSS reset)，并将建房用的砖块(原子类)准备充足。因为几乎所有的房子都要打地基，也都需要砖块，所以base层具有高度可移植性，不同设计风格的网站可以使用同一个base层。因为这一层的内容很少，所以可以简单地放在一个文件里，例如 base.css。
base层相对稳定，基本上不需要维护。
2. common层
这一层位于中间，提供组件级的CSS类。提到组件，就不得不提“模块化”。“模块化”可以从样式和行为两个层面来考虑，与 common层相关的是样式的模块化。我们可以将页面内的元素拆分成一小块一小块功能和样式相对独立的小“模块”，这些“模块”有些是很少重复的，有些是会大量重复的，我们可以将大量重复的“模块”视为一个组件。我们从页面里尽可能多地将组件提取出来，放在 common层里，common层就相当于MVC模式中的M( Model，模型)。为了保证重用性和灵活性，M需要尽可能将内部实现封装，对可能会经常变化的部分提供灵活的接口。
common层就像建房时用到的门窗，不同风格的房子会用到不同样式的门窗，各个房间用到的门窗的数量和位置可以不同，但样式相同。门窗有自己的小元件，比如玻璃、门闩、门框、门板、钥匙孔等。门窗可以整体移动、增减，但门窗本身的构造是相对稳定的。不同风格的房子就好比不同风格的网站，房子选用的门窗就好比这个网站选用的UI组件，门窗最好与整个房子的风格保持一致，同样，网站最好让UI组件的风格保持相同。UI组件是网站中的单位，在网站内部可以高度重用，但不同的网站可能会用不同的UI组件。
所以，common层是网站级的，不同的网站有不同的common层，同一个网站只有个common层，common层是放在一个common. css文件里，还是按照功能划分放在诸如common_form.css， common_imagelist.css的多个文件里，需要根据网站规模来决定在团队合作中， common层最好由一个人负责，统一管理。
3.page层
网站中高度重用的模块，我们把它们视为组件，放在common层:非高度重用的模块，可以把它们放在page层，page层位于最高层，提供页面级的样式，同样以建房子为比喻，page层就好比是房间内的装饰画，不同的房间张贴的装饰画各不相同。它不像砖块，所有房子都相同:也不像门窗，同一房子里都相同。它对重用性没有要求，可根据各个房间布置的需要任意张贴。
page层是页面级的，每个页面都可能会有自己的page层CSS，page层的文件可以用< style type=“text/CSS”>标签内置于页面中，但这么做没有将样式彻底从HTML文件中分离出来。也可以根据页面写在诸如 page1.css、page2.css、page3.css的文件里，这样做可以将样式很好地从HTML中分离出来，但可能会产生大量CSS文件，有些CSS文件可能非常小，带来维护上的麻烦。如果网站规模不会过于庞大，建议将网站内所有page层的代码放在一个page. css文件里，根据页面配上注释，分块书写，便于维护。
当然，page. css还是应当越精简越好，能用base层和common层的css解决的，就尽量不要用到page层。
base层基本上不需要维护，common层修改的幅度不会很大，通常只由一个人负责维护，但到了page层，代码可能由多人开发，如何避免冲突是个需要注意的问题，通常我们通过命名规则来避免这种冲突。
发表评论