让你写出更轻巧、更快并且更不会让你头疼的CSS的方法

所属分类: 网页制作 / CSS 阅读数: 1649
收藏 0 赞 0 分享

无论是哪种原因,这都不是无法避免的。写出干净,超级可管理的CSS很简单,只要你走对了路,你的代码会更便于今后的维护和编辑。

写出更轻巧、更快并且更不会让你头疼的CSS,以下这10个技巧将会提高你这方面的能力。

1.保持条理性

像任何事情一样,让自己保持条理性(有组织)是值得的。采用清晰的结构,而不是随心所欲地组织id和class(别想到啥就写啥)。

这会有助于你在心里记住CSS的级联性,并让你的样式表能够利用样式继承。

首先声明最通用的item(id class或者是html element),接下来是稍微不那么通用的……依此类推。这让你的CSS能适当地继承属性,当需要的时候,重写一条特殊的样式会更容易。将来编辑CSS时也会更快,因为它遵循着一个易于阅读的逻辑结构。

用一个对你来说最好使的结构,同时在心里想着将来的编辑和其他开发人员。

  • 重置和重写
  • 链接和字体
  • 主布局
  • 二级布局结构
  • 表单元素
  • 其他杂项

    2.标题、日期和签名

    让其他人知道谁写了你的CSS,什么时候写的,以及如果有问题可以联系谁。在设计模板或主题时这非常的有用。

    稍等片刻…那些色标数字是咋回事?多年以来,我发现,简单列举出我的样式表里常用的颜色,在初次开发和后期编辑时真的非常有帮助。

    这节约了你打开Photoshop从设计图里吸一个颜色,或者在这个网站的风格指南(如果这个东东存在)里查颜色。如果你需要那个特定的蓝色的HTML代码,只需要翻到注释处复制它就行了。

    3.搞一个模板库

    一旦你选定了用一个结构,剥掉所有不通用的并把文件存成一个CSS模板,以便将来使用。

    你可以为多种用途保存多个版本:两栏布局、博客布局、打印、移动等等……Coda(OSX的编辑器)有一个优秀的Clips特性能让你很简单的做到这些。很多其他的编辑器也有类似的特性,不过甚至是一批简单的文本文件也能很好地工作。

    每次都从头开始重写每一个样式表是很疯狂的,特别是每个都是采用一样的约定和方法。


4 有用的命名习惯

你会注意到上面我声明了两个列的id,我管他们叫col-alpha和col-beta,为什么不叫col-left和col-right?请总是考虑到将来的编辑。

下一年你可能需要重新设计你的站点,把左边的列移到右边,你不该就为了调整位置而在HTML中重命名这个元素并在样式表中重命名id。

当然,你可以就把左边的列移动到右边并且保留#col-left的id,但是那多让人困惑?如果id是“左”,人们应该会希望它将一直在左边。之后这没为你留下太多空间去移动周围的东西。

CSS的一个主要优点就是分离样式和内容的能力。你可以完全不用碰HTML,只修改CSS,就能重设计站点,所以不要用限制性的名字弄脏了CSS。用更通用的命名习惯,并保持一致。

让具体的位置或者样式的词语原理你的样式和id,一个.link-blue同样会让你话费更的工作,或者在客户要求你把那些蓝色的链接修改成橙色的时候让你的样式变得真的很糟糕。

按照他们是什么,而不是他们看起来的样子为元素命名。例如,.comment-blue和.comment-beta比起来就不太通用了,.post-largefont比.post-title更局限一些。

5. 用连字符取代下划线

比较老的浏览器可能对CSS中的下划线支持不太好,或者完全不支持。为了更好的向后兼容,请养成使用连字符的习惯。用#col-alpha而不是#col_alpha。

6. 不要重复自己

用组合元素代替重新声明样式来尽可能的重用样式。如果你的h1和h2都用同样的字体大小、颜色和边距,用逗号组合他们。

如下:

你也应该尽可能使用简写。请永远寻找机会组合元素并使用简写声明。

你可以比较以下两种写法:

明白css解释这些简写的顺序是非常重要的:top,right,bottom,left。一个大的顺时针圈,从正午开始。

同样的,如果top和bottom,或者left和right属性是相同的,你只需要写两个:

这条声明将top和bottom的margin设置为1em,left和right的margin为0。

7. 优化为轻量级的样式表

遵照上面的技巧,你能真的减少样式表的体积。体积越小,加载越快,并且更易于维护更新。

删掉那些不需要的,尽可能的用组合来合并样式。小心使用封装好的css框架,你很可能继承了一大堆不会用到的东西。

另一个为css瘦身的快速技巧是:你不需要为0指定单位。如果一个margin设置为0,你不需要写0px或者0em。0就是0,不需考虑丈量单位,css能够明白。

8. 为Gecko编写你的基本样式,然后为Webkit和IE做调整

把你自己从排除故障的头疼中拯救出来,先为Gecko浏览器(Firefox, Mozilla, Netscape, Flock, Camino)写css。如果你的css在Gecko中工作得很好,它也很可能在Webkit(Safari, Chrome)和IE中也没有问题。

9. 验证

请使用W3C的免费CSS验证。如果你遇到问题,你的布局不像你想要的那样工作,CSS验证器会在指出错误方面给你很大的帮助。

10.保持屋内整洁

为特定浏览器写的CSS分别放到各自独立的样式表,用Javascript/服务器端代码或者条件注释按需加载。用这个方法避免在主样式表出现肮脏的CSS hacks。这将保持基本的CSS干净且易于管理。[完]

更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多