黑马程序员技术交流社区

标题: 老司机的更好的进行CSS编程的技巧 [打印本页]

作者: 杨凯233 时间: 2016-9-21 21:04
标题: 老司机的更好的进行CSS编程的技巧
CSS 并不总是容易处理。在你的能力和经验不够的时候，CSS编程会成为一个噩梦，特别是你不确定为页面元素中选择哪种选择器的时候。使用一个不常见的CSS属性以实现更好的语义化，没有比这个方法更好用的更简单的的实现减少代码复杂度的了。

1、首先重置CSS样式 “你可能经常使用某属性的默认值而不是专门为该属性设置一个值。有的开发者倾向于设置Global white space reset5 ，在样式表的顶部将所有元素的margin和padding都设置为0

2、编写一个辅助CSS类库此类库用于辅助调试，但是要避免用于已发布的版本中（将标记层与表现层分离）。你可以使用如下多种类名(即 ...)来调试标记层。
3、使容器保持最小化。 “将你的文档从结构臃肿中拯救出来。新手开发者倾向于使用很多类似于表格单元格的DIV来实现布局。实际上许多其他结构元素都可以用来实现布局。不要使用过多的DIV。在使用过多的包装（DIV）去实现效果前考虑所有的选择，会发现使用一点漂亮的CSS也能达到相同的预期效果。”

4、使CSS hack保持最少 “除非遇到了已知的已公布的bug，否则不要使用hack。这是一个很重要的要点，因为我也经常看到hack被用来处理一些压根儿就没有问题的东西。如果你发现需要找一个hack来处理某个设计中的问题，那么首先你需要做一些调查（Google这里能派上用场），然后试着鉴定一下你遇到的这个问题（是否真的需要hack来处理）。

5、在敏捷开发中使用CSS常量 “常量的概念-通过你的代码可以使用的固定值是有用的。有一种应对CSS中缺乏常量的方法是在CSS文件顶部注释中添加一些相关的定义来定义‘常量’。这种方法常见的一种应用是‘创建颜色词汇表’。这种方法可以让你对网站中使用的颜色有一个快速的参考，避免在使用颜色时失误，并且一旦你需要修改颜色，你可以马上利用这个速查表进行搜索和替换。” [

6、使用一个通用的命名系统。在寻找bug或者更新文件时，如果你有一个id和class的命名系统会节省很多时间。特别是大型的CSS文件，如果命名不规范，很快就会导致巨大的混乱。我推荐使用parent_child模式。

7、根据class和id的语义适当的为他们命名。 “我们倾向于避免表明表象方面的命名。否则，如果我们命名一些右列的东西，完全可能改变CSS并且“右列”最终在页面的左边显示。这在未来可能导致混乱，所以最好避免这种表象的命名方案。

8、分类常见的CSS声明选择器。 “分类选择器。当一些元素类型，类或者id共享一些属性时，你可以分类选择器避免在有些时候设置了相同的属性。这将会节省潜在的大量空间。

9、将你可能会重复使用很多次某个唯一的属性单独分离出来。 “如果你发现你使用某个唯一的属性很多次，为了使你不再一遍又一遍的重复不仿将其分离出来，而且也使你能够改变网站中所有使用过此属性的部分的显示。”

10、尽量将id和class的命名持平文档树尽可能的使用上下文选择器25 。不要担心这样做会使选择器变得冗长。长的选择器会使css文档更容易阅读，也减少了发展成 classitis 或者 divitis26的可能。

作者: 西边雨 时间: 2016-9-22 23:16
最近正在学习Css，正好可以学习，感谢分享！

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2