A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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的可能。

1 个回复

倒序浏览
最近正在学习Css,正好可以学习,感谢分享!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马