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

          

      

  • 相关阅读:
    vue组件常用传值
    定时器的暂停,继续,刷新
    element-ui表格带复选框使用方法及默认选中方法
    git创建分支
    CAS协议原理与代码实现(单点登录 与 单点登出的流程)
    Java-技术专区-Files类和Paths类的用法
    Java-技术专区-Java8特性-parallelStream
    ELK日志系统环境搭建-6.x系列
    Spring系列-Spring Aop基本用法
    Spring-框架系列-SpringIOC容器初始化
  • 原文地址:https://www.cnblogs.com/fdxjava/p/11106779.html
Copyright © 2020-2023  润新知