让你的网页用CSS好的表现出来

CSS是并不是一门很难学习和使用的语言,尽管它可能难以精通.如果你在你的项目中使用到了CSS,特别是在一个比较大的项目中,如果你没有用到一些技巧来帮助你很好的管理CSS代码,那将给你带来一定的困难.通过一定的技巧来很好的写你的CSS代码,你可以让你在programing时更轻松,并同时改善你的项目.当涉及到CSS,代码中的一些小的调整就可以带来很大的改进,使你的工作更有效,并带来很好的结果.今天,我在这里将提到19种技巧,希望可以帮助你在你的项目中写出很好的CSS代码.

用有意义的名字

在CSS中,其实是任何一门语言中,使用有意义的或是描述性的名字来定义你的变量,都是很重要的.它提高你代码中的可读性和可维护性.这时举一个经典的使用不好的命名规则的例子:有两列的布局,其中左边包含菜单的列命名为”leftcol”,另一个右边的是包含内容的列叫”rightcol”.这样是可以的,你有没有想过,如果这时你的客户要求改成不同的样式,怎么办呢?假如他想改变两个列的位置,那么,这样的这两个列命名含义就有错误了.

很好的办法是确定哪个是主要的内容,哪一个是次要的.主要内容可以被命名为”maincotent”,次要的内容可以命名为”secondarycontent”.这就可以解决交换列的问题,并提高了代码的可维护性.

没有ID的,多使用类

一个比较常见的错误,就是有一些web开发人员非常喜欢使用ID为每个标签命名,如果你在写JavaScript时这样做那是很高效的,因为这个可以很快的找到那个元素.然而,在CSS中,过渡的使用ID,只能降低代码的重用性.举个例子:

#formExample1{
     border:1px solid gray;
    padding:20px;
}
#formExample2{
     border:1px solid gray;
     padding:20px;
}

这样我们就没有用到代码的重用性,因为我们为不同的ID定义的相同的样式.使开发时间大大浪费,还写了很少不必要的代码.我们可以有class来这样写,举个例子:

.form{
     border:1px solid gray;
    padding:20px;
}

另一个降低了可重用性的例子是,使用复杂的选择器来写一个简单的标记.举个例子:

div.error-message{
     color:red;
}

为了方便维护的目的,这里我们很好重写这个选择器,只是.error-message.而且现在我们可以在我们想要的所有元素用这个样式.

正确的使用继承

大多数的时候,人们会忘记一些元素会继承它们父元素一些样式.而去创建一些不必要的class来为那些元素写样式.举个例子,这里写一个斑马表格,普遍的这样:

.odd{
     background-color:#E9EBEB;
}
.even{
     background-color:#9EB0EE;
}

同时table的HTML代码则是:

LoremIpsuLoremIpsuLoremIpsuLoremIpsu

而很好的解决方案是为table的body一个背景色, 或者找到偶数行或奇数,并为它写样式.这样会节省很多时间,少写很多代码.例如,我们这样写:

table tbody{
  background-color:#E9EBEB;
}
.even{
     background-color:#9EB0EE;
}

LoremIpsuLoremIpsuLoremIpsuLoremIpsu

当然我们还有CSS to select the even and odd elements这个方法,但如果我们的浏览器不支持呢.

命名空间

命名空间是一个很好的使用层叠并有效的避免对所有元素都使用class的方法.举个例子,想像我们要创建一个widget并且widget的title我们要用一个H3标签.我们可以为widget建一个类名,并通过这个类关联到这个类里的任何东西.

.widget{
	width:300px;
        height:200px;
       border:1px solid gray;
}
.widget > h3{
	 color:white;
         background:black;
         padding:10px;
}

Weather Details

优化统一不同的浏览器

其中最困难的就是如何让CSS代码在众多主浏览器中正常的工作,有些开发者想要让每一个像素都能在所有浏览器中看起来一样,这是一个很大的错误.因为这样,我们必须要采用大量的hack和样式,来为一个不支持某种效果的浏览器,让它能够让网页看起来一样.一个例子就是圆角框,如果圆角框只是为了达到一个统一美观的目的,为什么不放弃那些真正支持这个的浏览器,为什么要为用户大多数时间都不会在意的地方而特意创建一个圆角的图片来.

当有人问我是否要统一所有浏览器的效果时,我告诉他这个网站地址Do websites need to look exactly the same in every browser?而且我知道,很快他也会给出和我相同的答案.

很好的使用标记,避免滥用Div

我们仍就可以看到很大一部分网站过多的使用spam和div标记.经常可以看到像这样,在用于菜单的ul套一个div.

HomeProductsServicesAbout Us

其实这个菜单完全可以避免这个父DIV,像这样;

 HomeProductsServicesAbout Us

这样我们不仅简化我们的HTML代码, 同时我们也简化了CSS.因为这样我就可以直接找到目标来写样式,而不用再通过父标签.

避免内嵌样式

所有人都知道内嵌样式是一个不好的习惯,很好不要去使用.内嵌样式降低了代码的可重用性和可移植性,此外还加大了代码维护的难度.

避免Hacking你的代码

每个浏览器的每个版本都有bug,而且都用不同的方法定向样式表.一个最主要的例子是Internet Explorer,它是在开发者想要跨浏览器设计时最痛苦的一部分.当我说关于避免Hacking你的代码时,指的是增加In-CSS hack来代替条件注释.我宁愿保持代码的可读性和整洁,用一个额外的样式文件来为那个特定版本的Internet Explorer.所以如果另一个设计人员要修改这个代码,他就不需要头痛,不知道In-CSS代码是什么了.

Reset你的CSS

用一个Reset文件,可以不必烦恼浏览器的差异.此外,还可以创建一个基本的框架,来保证我们的样式在所用的浏览器都正常的工作.你可以在你的项目中用Eric Meyer’s CSS Reset或者YUI 3: CSS Reset.

选择一个框架

不久以前,我一直认为CSS框架并没有多大的用途,并且如果你了解CSS并准备好去做,就不需要其他的东西.但是当我看到YUI 和 960,我改变了我的想法.用这些框架,我可以更轻松的创建想要的布局.同时这些代码可以提高重用性,和保持一个良好的代码风格.

还有一些其他的框架Blueprint, Elastic, 和 YAML.

注释你的代码

注释是保持你代码的重用和维护的很好方法.如果你没有有条理的注释你的代码,你将会耗费很长时间来理解你几个星期前所写的代码.注释也可以帮助其他人来了解你的代码.

简写你的代码

这种是被建议使用的方法.我们将会减少写代码的时间,同时更优化你的CSS,因为它也减少了样式表文件的尺寸.例如:

.example {
	width:200px;
	height:100px;
	background-color:#CCCC66;
	border-top-color:#333333;
	border-top-style:solid;
	border-top-width:1px;
	border-bottom-color:#333333;
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-right-color:#333333;
	border-right-style:solid;
	border-right-width:1px;
	border-left-color:#333333;
	border-left-style:solid;
	border-left-width:1px;
}

这个例子会被写能这样

.example {
	width:200px;
	height:100px;
	background:#CCCC66;
	border:1px solid #333333;
}

明显的这大大降低了你的网页读取时的负荷,它更小更简练.

保持你的风格

每个人都有自己的编程风格,在CSS中也不例外.有些人喜欢在每一行都加一个声明,有些人喜欢把声明都放在一行上.有些则喜欢按字母来排序.我建议选择一种风格,或者是一个混合,并保持下去.此外要选择一个适合你的,让你用起来更舒服.要记住,让它为你工作而不浪费你的时间.

寻找重复的代码

在你完成了你的项目时,你很好去找一找是否有相同的代码或部分,并把它们转换到一个类里.举个例子,在项目中,用相同的背景和颜色的不同部分,很好的方法是把他们放到一个类里并重用他们,这将避免你的重复的代码,面可以很好的维护他们.

使用Sprites

当服务器被请求调入每个图片时,如果我们用Sprites(图片整合技术),将极大的减少服务器的压力.从而加快页面加载速度。

面向对象的CSS

这是由Nicole Sullivan提出的关于OO CSS的一种的方法,其重点是代码的可重用性,和构建更小的CSS组件.是个很值得关注的话题.

多向大师学习

网上有很多的教程,我们可以直接去他们的主页去理解他们的CSS.这里建议一些不错的选择.Chris Coyier, Eric Meyer, Stu Nicholls, Nicole Sullivan, Andy Budd, Alen Grakalic, 和 a bunch of sites

验证你的CSS

为了确保你的CSS可以在所有的浏览器上正常的工作,这是一个很好的办法.当我们验证我们的代码时,可以找到一些在开发阶段的错误.

压缩你的CSS

在你准备正式使用的时候,你可以去压缩你的CSS.删掉空格和注释,这将有助于减少40%样式文件的大小.很大程度的提高用户的体验,减少服务器的负荷.

评论加载中... 内容： 评论者： 验证码：