编写规范--Web前端开发修炼之道
1.css命名加前缀---如:ad-time box-hb--这样辨识扩展度比较高
2.挂多个class还是新建class--多用组合,少用继承
3.如果不确定模块的上下margin特别稳定,最好不要将它写到模块的类里,而是使用类的组合,单独为上下margin挂用于边距的原子类。
模块最好不要混用margin-top和margin-bottom,统一使用margin-top或margin-bottom
4.css设置的样式是可以层叠的---当不同选择符的样式设置有冲突时,会采用权重高的选择符设置样式。(html标签的权重是1,class的权重是10,id的权重是100)
如果css选择符权重相同,那么样式会遵循就近原则,哪个选择符最后定义,就采用哪个选择符的样式。
为了保证样式容易被覆盖,提高可维护性,css选择符徐保证权重尽可能的低
5.css -----sprite
用两张图实现高亮,--没加载一个图片就会发送一次请求
合并一张大图,利用大图的背景移动实现高亮---background-position:0 -31px;
缺点:通过background-position进行定位--精确测量坐标,不利于维护
6.建议采用一行式css 编码风格
7.id和class
--同一个网页,相同的id只能出现一次,它不可重复,而class可以任意出现多次;
--id的css选择符权重为100,而class的选择符权重为10;
--原生js提供getElementById()方法,支持通过id对应到相关的HTMLLIElement,但不支持class;
8.CSS-hack(解决兼容性问题)
IE条件注释发--<!-- [if IE]><linck type="..."/><![endif]--> 只在IE下生效
<!--[if gt IE 6]><![endid]> 只在IE6以上版本生效
还可在--包裹style标签,script标签。。
选择符前缀hack法
样式属性前缀hack法
9.--解决超链接访问后hover样式不出现的问题
hover 选择器用于选择鼠标指针浮动在上面的元素。
提示::hover 选择器可用于所有元素,不只是链接。
提示::link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active选择器用于活动链接。
注释:在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。