前端代码规范总结

2023年4月27日 197次阅读 来源: 漓漾li

html语义化

  • 为什么要语义化

    • 在没有css的情况下，页面也能呈现出内容结构；

    • 有利于SEO有助于爬虫住区更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重；

    • 方便其他设备解析：屏幕阅读器、盲人阅读器、移动设备，以更有意义的方式渲染网页。

  • 如何实现语义化

    • 尽可能少的使用div、span等无语义的标签，只作为布局框架使用；

    • 不要使用纯样式标签，如b(文本加粗)、font(规定字体格式)、u(下划线文本)、i(规定斜体文本)等，使用css代替；

    • 需要强调的文本放在strong(语义更强)或em标签中，其携带的默认样式最好用css代替。

    • 每个input的说明文本都要用label标签包裹起来，并设置label的for属性为input的id让其相关联。

    • 可以使用W3C HTML Validator验证并规范代码。

css规范

  • CSS页面文件，其文件名与HTML文件名一致；

  • 使用soft tab (四个空格)进行缩进；

  • 每个属性生命末尾后都要加分号；

  • 注意空格的使用(不在详解)；

  • 注释统一使用/* */；

  • 命名：

    • 依据其内容、功能来命名，而不是其表现形式；
    • 类名使用小写字母，以中划线(相比下划线可少按一次shift)分割；
    • id使用驼峰命名法；
    • 不允许使用拼音；
      • sdfsdf

  • 样式声明顺序按下面的例子做分组处理：

      .declaration-order {
      display: block;
      float: right;

      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 100;
  
      border: 1px solid #e5e5e5;
      border-radius: 3px;
      width: 100px;
      height: 100px;
  
      font: normal 13px "Helvetica Neue", sans-serif;
      line-height: 1.5;
      text-align: center;
  
      color: #333;
      background-color: #f5f5f5;
  
      opacity: 1;
  }

  • 尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们；

  • 避免使用@import指令引入css文件，指令慢，并且增加额外请求；

  • 禁止使用！important；

  • 属性值0后不加单位；

  • 用border：0代替border：none;

  • 尽量少用*选择器。

图片规范

  • 图片使用英文字母、数字与下划线的组合；
  • 要尽量压缩图片到最小；
  • 可使用base64编码代替较小图片的链接，可以节省一次请求;
  • 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线。
  • 可用W3C css Validator验证并规范css代码；
  • 必须为img标签添加alt属性；
    原文作者：漓漾li
    原文地址: https://www.jianshu.com/p/430175cf1ffa
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞