0 Comments

编写完美CSS代码的五个关键(2)

发布于:2013-07-16  |   作者:广州网站建设  |   已聚集:人围观

三、CSS样式的组织

你应该组织你的样式表以致相关的内容靠在一起,更简单的找到想要的。使用更有效的注解。举个例子,这是我如何构造我的层叠样式表:

ExampleSourceCode


  1. /*****Reset*****/  
  2. 移除元素的填充(padding)和边距(margin)。  
  3. /*****BasicElements*****/  
  4. 定义基本元素的样式:body,h1-h6,ul,ol,a,p,等.  
  5. /*****GenericClasses*****/  
  6. 定义简单的风格,好像浮动的某一侧,移除元素的下边距,等当然,  
  7. 它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。  
  8. /*****BasicLayout*****/  
  9. 定义基本的模板:header,footer等.帮助定义网页布局的基本元素  
  10. /*****Header*****/  
  11. 定义所有Hearder元素  
  12. /*****Content*****/  
  13. 定义所有内容框内的元素  
  14. /*****Footer*****/  
  15. 定义所有Footer的元素  
  16. /*****Etc*****/  

定义其他的选择器。通过注解和归类相似元素的分组,将更快的找到你想要的。

四、保持一致性

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

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

ExampleSourceCode


  1. div#header{float:left;width:100%;}  
  2. div#headerdiv.column{  
  3. border-right:1pxsolid#ccc;  
  4. float:rightright;  
  5. margin-right:50px;  
  6. padding:10px;  
  7. width:300px;  
  8. }  
  9. div#headerh1{float:left;position:relative;width:250px;}  
  10.  

所以找到你喜欢的工作方式然后保持一致。
广州网站建设,网站建设,广州网页设计,广州网站设计

五、从正确的地方开始

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

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

通过先标记文档,你将不会碰到本已注定的divities1和classitis2麻烦!/*YouonlyneedtoaddinthatstuffonceyouhavebeguntowritetheCSSandrealizethatyouaregoingtoneedanotherhooktoaccomplishwhatyouaretryingtoachieve.*/(原文未译)。

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

标签:
飞机