书写CSS的5个小技巧让你的样式更规范

当前位置 : 首页 > 网页制作 > 心得技巧 > 书写CSS的5个小技巧让你的样式更规范

书写CSS的5个小技巧让你的样式更规范

来源:互联网 作者:脚本宝典 时间:2015-08-28 13:52
1. 按字母顺序来排列css 不按字母顺序排的: 复制代码 代码如下: div#header h1 { z-index: 101; color: #000;: position: relative; line-height: 24px; margin-right: 48px; border-bottom: 1px solid #dedede; font-size: 18px;

1. 按字母顺序来排列css 
不按字母顺序排的: 

复制代码

代码如下:


div#header h1 { 
z-index: 101; 
color: #000;: 
position: relative; 
line-height: 24px; 
margin-right: 48px; 
border-bottom: 1px solid #dedede; 
font-size: 18px; 


按字母顺序排的: 

复制代码

代码如下:


div#header h1 { 
border-bottom: 1px solid #dedede; 
color: #000; 
font-size: 18px; 
line-height: 24px; 
margin-right: 48px; 
position: relative; 
z-index: 101; 


理由是这样的:可以更好的找到某个属性。 
2. 更好的组织css结构 
使用css注释来给css分组,这样结构明了,也有利于协同设计。 
/*****Reset*****/ 
xxxxxxx{www.sytm.net} 
xxxxx{xxxxx} 
/*****layouts*****/ 
xxxxxxx{www.sytm.net} 
xxxxx{xxxxx} 
3. 保持一致性 
不要无意义的去讨论到底一个选择器的所有属性写在一行,还是每个属性写一行比较好。如果你就喜欢写在一行,因为每排写一行会让整个文档感觉太长了,找起来不方便。但是发给team的另一个人,他却喜欢每句排一行,那怎么办?其实很简单,把css拿去w3c验证,它会有一份结果,会自动转换成每排一行。 
4. 先标记 后css 
对html的标记弄好后再写css会比较不容易出错。比如写一个页面,先写一个最基本的标记结构<body> 

复制代码

代码如下:


<div id="wrapper"> 
<div id="header"><!--end #header--> 
<div id="container"> 
<div id="content"> 
</div><!--end #content--> 
<div id="sidebar"> 
</div><!--end #sidebarr--> 
</div><!--end #container--> 
<div id="footer"> 
</div>!<--end #footer--> 
</div><!--end #wrapper--> 
</body> 


然后就是尽量善用子选择器,而不是一要给哪个元素进行样式化,就给它添加个选择器。 
5. CSS Reset/重置 
你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下来应该根据你的项目改成你自己的reset. 
* { margin: 0; padding: 0; }这句并不适用一些元素比如单选按钮,不过有单选按钮就重新给单选按钮重设就好了嘛。


Tag:

相关文章

网友评论

<