CSS样式表规划与管理的经验总结

时间:2021-05-26

彻底放弃表格布局,使用xhtml+CSS建站也已经有一年多了。一年多的实践也积累了一定的经验,现在写这篇文章来总结一下。在使用xhtml+CSS建站的过程中有一个比较关键的问题:网站的CSS样式表规划与管理。

我的CSS管理进化史

  在最初使用CSS来控制网站样式的时候,并不清楚CSS管理规划之类的东西,所写的CSS基本上都是按照需要,随时添加,刚开始还不觉得有什么不好,但是后来越加越多,越改越乱,虽然有一些注释,但到最后还是变得让我自己看着都头疼。那个时候,一个网站所有的CSS都在一个文件中,没有规划,并且排序也没多少规律,于是只能在html页面中找到class的名称,然后在上千行的css代码中搜索自己想要的那个。

  过了一段时间,思考总结之后,我对站点的CSS样式表进行了初级的规划。在样式表中初步划分了三个区域:

ExampleSourceCode[]
layout.css
public.css
header.css
sidebar.css
main.css
footer.css
index.css
form.css
  解释一下,layout.css负责整个网站的布局,比如#header,#footer等布局的基本位置及样式设计;public.css负责一些公用样式定义,因为一个class中可以使用class=”navbarfont12px”这种利用中间空格分隔的方法来应用多个class样式,所以可以定义一些比较常用的或者在特殊情况下需要修改的公用class,方便局部微调;header.css、sidebar.css、footer.css等模块是对应头部、侧边栏、底部模块的css样式表,可以根据网站的具体需求来增减模块;index.css是一些首页特有元素的css,因为首页的特殊性,我们在设计css的时候通常对首页进行特殊处理,一般情况下,首页是css最复杂的一个页面,有必要对首页的独有css元素进行归类放置,也可以不用@import引入index.css,而把它单独放到首页引用;form.css是表单元素的样式表,表单虽然不难,但控制起来还是比较麻烦的,单独放到一个css文件里方便控制,当然,类似的其他元素你也可以这么处理。

  step3:在各个样式表文件中写入样式。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章