快速业务通道

让样式表CSS代码更加专业规范

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-03
***Basic Elements*****/定义基本元素的样式: body, h1-h6, ul, ol, a, p, 等.
/*****Generic Classes*****/定义简单的风格,好像浮动的某一侧, 移除元素的下边距, 等当然,它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。
/*****Basic Layout*****/定义基本的模板: header, footer等. 帮助定义网页布局的基本元素
/*****Header*****/定义所有Hearder元素
/*****Content*****/定义所有内容框内的元素
/*****Footer*****/定义所有Footer的元素
/*****Etc*****/定义其他的选择器。通过注解和归类相似元素的分组,将更快的找到你想要的。

四、一致性

  无论你决定使用什么方式去编写代码,保持一致。我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦。这是不需要争辩的。每个人都有自己的观点,所以选择一种你喜欢的工作方式,并在所有的样式表中保持一致。

  就我个人而言,我将使用两者结合的方式。如果一个选择器超过了3个属性,我将截断它采用多行的方式编写。

div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }

  所以找到你喜欢的工作方式然后保持一致。

五、从正确的地方开始

  在完成标记语言之前不要去尝试靠近你的样式表。

  当我准备分割一张网页的时候,创建CSS文件之前,我需要预览并且标记body开标签到body的闭合标签之间的所有文档。我不会增加额外的DIV ,ID,或者类选择器。我将会添加一些一般的DIV,就好像hearder、content、footer.因为我知道这些东西是现实存在的。

  通过先标记文档,你将不会碰到本已注定的divities1和classitis2麻烦!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未译)。

  利用CSS子选择器指定子元素;不要只是机械的给元素添加类或者ID选择器。记住:没有一个良好的格式化文档(或者标记结构)CSS是无价值的。

总结

  这些能够帮助我更好的完成CSS代码的编写。但是这并不意味着这张列表的结束,接下来我将会去带来一些其他的与大家分享,欢迎您关注webjx.com。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号