编写规范--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 之后(如果存在的话),这样样式才能生效。

      

  

 

posted @ 2019-06-29 15:38  小白咚  阅读(185)  评论(0编辑  收藏  举报