让你的CSS更尽完美的技巧

发布于大漠

13 年前

CSS要学会并不是一件难事，但要在一个大项目中写好CSS和管理好CSS还是有一定的难度的。不过并不可怕，如果你遵循一定的方法，还是很容易写出一个较好的CSS，也能很好的管理好你的CSS样式。下面搜集了几个这方面的技巧，希望能帮助大家写出一个更好的CSS样式。

一、不要使用全局复位样式

使用全局复位样式来删除所有HTML元素的默认的“margin”和“padding”是非常不好的一种做法。他不仅缓慢和效率低，但你在项目中必须重置这些参数。就像Eric Meyer重置样式。

不好的方式：

		*{ margin:0; padding:0; }

建议的方式：

		body,ul,ol,dl,dd,dir,h1,h2,h3,h4,h5,h6,p,pre,blockquote,hr,figure{
      margin:0;
      padding:0;
		}

扩展阅读：

二、不要使用IE HACK

IE Hack可能有时候作用是蛮大的，紧急时候能帮你解决大问题。我也在《浏览器兼容之旅的第二站:各浏览器的Hack写法》中整理了一份所有浏览器的Hack写法，但我更多次强调尽量不要使用IE Hack，就算你在IE下需要特殊写一个样式，我强烈建议您使用条件样式来写：

不好的方式：

		.eml {
			_postion: relative;
			_top: 10px;
		}

建议的方式：

		<!--[if lte IE 6]> 
			<link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />  
    <![endif]-->

然后把样式写到ie-styles.css文件中：

		.eml {
			postion: relative;
			top: 10px;
		}

扩展阅读：

三、使用有义的类名和ID名

假设你定的的侧边栏使用了“left-sidebar”类名，但你是设计重新布局，将原来的左边栏放置在右边栏，那么你定义的“left-sdiebar”将无任何意义。你应该把之前声明的类和ID名做一些思考，让他们在你的页面中更具有意义，更让人读懂：

不好的方式：

		<div class="box">
			<div class="leftBox">sidebar</div>
			<div class="mainBox">main content</div>
		</div>

建议的方式：

		<div class="container">
			<div class="aside">sidebar</div>
			<div class="content">main content</div>
		</div>

扩展阅读：

四、利用CSS继承关系

如果多个子元素的样式和具有相同的样式，应该使用继承关系来写样式，这是一个很不错的方法。它能使你更容易更新你的代码和管理你的代码，还将大大减少CSS文件大小。

不好的方式：

		#container li{ font-family:Georgia, serif; }  
    #container p{ font-family:Georgia, serif; }  
    #container h1{font-family:Georgia, serif; }

建议的方式：

		#container{ font-family:Georgia, serif; }

扩展阅读：

五、群组选择器

如果你的样式，多个元素具有相同的样式，那么你可以使用群组选择器来写样式，这将大大的节省你的时间和空间。

不好的方式：

		h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }  
    h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }  
    h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

建议的方式：

		h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

扩展阅读：

六、使用速记属性

CSS中有很多属性可以使用缩写法，比如“margin”、“padding”、“background”、“font”、“border”、“color”等。那么在你编写你的CSS属性时，碰到这些属性尽量使用其缩写，其一能快速编写你的CSS代码，其二能帮你减少你的样式大小。

不好的方式：

		li{  
      font-family:Arial, Helvetica, sans-serif;  
      font-size: 1.2em;  
      line-height: 1.4em;  
      padding-top:5px;  
      padding-bottom:10px;  
      padding-left:5px;  
    }

建议的方式：

		li{  
			font: 1.2em/1.4em Arial, Helvetica, sans-serif;  
			padding:5px 0 10px 5px; 
		}

扩展阅读

七、组织CSS代码

使用一定的模式来组织你的CSS代码，方便你在后期查找你需要的代码，比如说你要寻找一个特定的样式，这样将为您省下大量的时间找寻找他。下面展示的是一个组织CSS代码的示例：

		/*------------------------- 
        CSS Reset 
    -------------------------*/  
      
    /*------------------------- 
        Generic Classes 
    -------------------------*/  
      
    /*------------------------- 
        Layout styles 
    -------------------------*/  
      
    /*------------------------- 
        Section specific styles 
    -------------------------*/

扩展阅读：

八、增加CSS的可读性

写一个可读的CSS样式，使你更容易找到和更新一个样式。下面是两种不同的版本样式：

		/*------------------------ 
    Each Style on new line 
    ---------------------*/  
		div{  
				background-color:#3399cc;  
				color:#666;  
				font: 1.2em/1.4em Arial, Helvetica, sans-serif;  
				height:300px;  
				margin:10px 5px;  
				padding:5px 0 10px 5px;  
				width:30%;  
				z-index:10;  
		}  
			
		/*------------------------ 
				All Styles on one line 
				---------------------*/  
		div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;

扩展阅读

九、添加适当的注释

在CSS样式中使用适当的注释有多个好处，其一可以分开不同部分的代码；其二可以增加代码的可读性等：

		    /*-------------------- 
        Header 
        -----------------*/  
				#header{ height:145px; position:relative; }  
				#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}  
					
				/*-------------------- 
						Content 
						-----------------*/  
				#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}  
				#content .posts{ overflow:hidden; }  
				#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }  
					
				/*-------------------- 
						Footer 
						-----------------*/  
				#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}  
				#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

扩展阅读

十、按CSS属性字母顺序排列

这个习惯可能没有几个人有，我刚到公司时，我的Boss就是这样要求我写CSS，要按属性的字母顺序来写，我当时就觉得那样写真是多此一举，蛋疼的事情。因为这样书写CSS样式真的好困难，但久而久之我也坚持下来了，后来发现这样写虽然麻烦，便也是蛮好的，它让我更容易寻找我需要的样式。

不好的方式：

		div{  
      background-color:#3399cc;  
      width:  30%;  
    	color:  #666;  
      margin: 10px 5px;  
    	font:   1.2em/1.4em Arial, Helvetica, sans-serif;  
      height: 300px;  
      padding:5px 0 10px 5px;  
      z-index:10;  
    }

建议的方式：

		div{  
      background-color:#3399cc;  
      color:  #666;  
      font:   1.2em/1.4em Arial, Helvetica, sans-serif;  
      height: 300px;  
      margin: 10px 5px;  
      padding:5px 0 10px 5px;  
      width:  30%;  
      z-index:10;  
    }

十一、使用外部样式表

样式写在单独的一个页面中，只能对当前页面有效果，为了更好的管理和更新你的样式，最好把你的样式单独的放在外部文件中，然后在使用“<link>”引用外部样式文件。

不好的方式：

		<style type="text/css" >
      #container{ .. }  
      #sidebar{ .. }  
    </style>

或者写在行内

    
    <li style="font-family:Arial, helvetica, sans-serif; color:#666; " >...</li>

建议的方式：

		<link rel="stylesheet" type="text/css" href="css/styles.css" />

十二、分割成多个CSS文件

如果你在一个项目中有多个模块，而且每个模块都有不同的风格，此时你可以将你的CSS样式分割成多个文件，它们每一个文件对应你的一个模块，然后在创建一个样式文件，将这些文件导入到这个文件中。这样做能更好的在一个大项目中组织你的代码，而且意味着减少更多的HTTP请求和加载时间。

不好的方式：

		<link rel="stylesheet" type="text/css" href="css/reset.css" />  
		<link rel="stylesheet" type="text/css" href="css/typography.css" />  
		<link rel="stylesheet" type="text/css" href="css/layout.css" />

建议的方式：

		<link rel="stylesheet" type="text/css" href="css/styles.css" />

其中styles.css导入下面的样式文件：

		@import "style/css/reset.css";  
    @import "style/css/typography.css";  
    @import "style/css/layout.css";

扩展阅读

十三、压缩CSS代码

如果你的项目调试完成，只差上传到服务器上时，那么在上传你的文件之前，最好使用相关的压缩工具压缩你的CSS代码，以减少文件大小，提高网页的加载时间。

扩展阅读

十四、编写一致的CSS

当你在同时开发多个Web项目中时，你应该尽量编写一些相同的CSS代码，让所有项目能使用到这样同的CSS代码，这样将减少你的工作量，提高你的开发效率。

我希望上面的这些方法能帮助你写出更好的和易于管理的CSS代码。如果你在这方面有更好的建议，您可以在下面的评论中直接留言，与我们一起分享你的技巧。

如需转载烦请注明出处：W3CPLUS

jordan retro 11 mens Shoes