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

前端  /  管理员 发布于 7年前   301

无论是哪种原因，这都不是无法避免的。写出干净，超级可管理的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干净且易于管理。［完］