怎样优化CSS样式表
在网站建设过程中,为了网页设计简洁性,为了提升网页打开速度和对搜索引擎的友好性,网站建设人员通常会为整个网站制作一个独立于网页的CSS样式表,那么如何让你的CSS代码更具有组织性和易维护性,
1.井井有条。 和许多其他的事情一样,首先要保持一个良好的组织性,而不是想到ID就写ID,想到 CLASS就写CLASS,而要使样式表保持一个连贯的结构,这能让你充分的利用样式的继承。首先定义你最常用的项目,然后是不太常用到的然后是其他,这会使你的CSS属性得到正确的继承,当你需要重新定义一个特殊的风格时会很简单,也会使得你以后对该CSS的修改和编辑更加迅速,因为它遵从简单、可读、有逻辑的结构。 一个良好的CSS结构应该包括以下一些部分:
1. 重置和覆盖(Resets & overrides)
2. 链接和字体(Links & type)
3. 主要布局(Main layout)
4. 次要布局结构
2.风格名称、创建时间、签名。
让别人知道是谁写的样式表,当他们有问题的时候可以及时的请教,这在制作模板或者主题以及团队合作时非常有用。
3.制作一个模板库。 每次当你制作完一个样式表时,你可以去除那些不通用的东西,然后把文件保存为一个CSS模板以备以后之用。可以保存成多种用途的各个版本:两列布局、博客布局、打印样式、移动设备样式等等。coda有一个很棒的剪辑功能,可以帮你很容易的保存模板。合肥网站建设公司许多其他的编辑器也有类似的功能,即便是简单的文本批处理也可以很好做出一个模板库来 每次都从头重写每一个代码实在太疯狂,特别是当你使用相同的公约和方法。
4.使用有用的命名约定。
你可能注意到在第一条建议里的示例里,定义了一对ID叫:col-alpha 和 col-beta,为什么不直接叫col-left 和 col-right?想想我们未来要做的工作,来年也许你要将左侧的内容调整到右侧,你不应该重新命名你的HTML元素和重命名样式表的id而只是为了移动一下位置。
是的,也许你说你可以把左侧移到右侧而不改动它的HTML元素ID名,依然叫col-left ,但是这会是多么混乱啊,ID描述的是左侧,那就应该让它始终待在左侧,而不是背道而驰。
CSS的一个主要优势就是表现与内容的分离,你完全可以不用动HTML,而只是修改CSS去重新设计你的网站,所以不要使用有限制的命名,而更多的使用通用的命名约定并且要保持一致。让那些位置以及具体描述表现的词语远离你的CSS,类似。link-blue这样的class命名只会给你今后带来更多的工作 或者当你需要把蓝色链接换成红色的时候让样式表更加杂乱。元素命名最好是基于它们是什么,而不是它们看起来像什么。比如:.comment-beta 比。comment-blue更加通用,而。post-largefont比。post-title更加受限制。