要想创建可伸缩且容易维护的CSS系统,首先应该检查设计,寻找重复的模式,在这个阶段,应该注意结构和意义.
1.先把页面划分为大的结构性区域
比如容器,页眉,内容区域和页脚,这些区域在整个站点中往往是一致的,很少改变
2.将注意力转移到内容区域本身,开始建立网格结构
设计有多少个不同的内容区域?他们有什么差异?从布局的角度去看,寻找共同的特征而不是视觉表现,大多数设计只有几个独特的区域
3.在各个内容区域中需按照不同的布局结构
这些布局结构往往非常灵活,在各个页面之间常常有变化,是否需要把某些信息分为两列,三列或四列?
4.结构设计完之后,可以关注不同类型的内容
.内容新闻稿,文章还是公告?给每个内容快起一个有意义的名称,然后分析他们的关系
5.查看每个内容块的结构,看看不同类型中是否有共同的模式
例如文章和新闻稿可能都有醒目的页眉和页脚,所以可以加上相应的标识.对于错误信息,搜索框,和菜单项等也是这昂,应该尽量采用一般的类名,然后根据上下文应用样式.
6.找出模式并确定命名约定后,最好马上开始定义将使用的元素
例如链接表可能是一个无序列表,而文章可能是一个DIV,其中包含H2,段落和锚元素,一起提前定义元素比随时添加元素容易的多. 还可以记下颜色编码,尺寸等信息.
