html、css、js的命名规范

时间：2022-11-19 08:23:25

最佳原则

坚持制定好的代码规范。

无论团队人数多少，代码应该同出一门。

项目命名

全部采用小写方式， 以下划线分隔。

例：my_project_name

目录命名

参照项目命名规则；

有复数结构时，要采用复数命名法。

例：scripts, styles, images, data_models

JS文件命名

参照项目命名规则。

例：account_model.js

HTML文件命名

参照项目命名规则。

例：error_report.html

语法

  • 缩进使用soft tab（4个空格）；
  • 嵌套的节点应该缩进；
  • 在属性上，使用双引号，不要使用单引号；
  • 属性名全小写，用中划线做分隔符；
  • 不要在自动闭合标签结尾处使用斜线（HTML5 规范指出他们是可选的）；
  • 不要忽略可选的关闭标签，例：</li> 和</body>。

  • HTML5 doctype

    在页面开头使用这个简单地doctype来启用标准模式，使其在每个浏览器中尽可能一致的展现；

    虽然doctype不区分大小写，但是按照惯例，doctype大写 

    <!DOCTYPE html>

  • lang属性

    根据HTML5规范：

    应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。

    更多关于 lang 属性的说明在这里；

    在sitepoint上可以查到语言列表；

    但sitepoint只是给出了语言的大类，例如中文只给出了zh，但是没有区分香港，*，大陆。而微软给出了一份更加详细的语言列表，其中细分了zh-cn, zh-hk, zh-tw。

  • <!DOCTYPE html> <html lang="en-us"> ... </html>

  • 字符编码

    通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。

  • IE兼容模式

    用 <meta> 标签可以指定页面应该用什么版本的IE来渲染；不同doctype在不同浏览器下会触发不同的渲染模式（这篇文章总结的很到位）。

  • <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html>

  • 引入CSS, JS

    根据HTML5规范, 通常在引入CSS和JS时不需要指明type，因为 text/css 和 text/javascript 分别是他们的默认值。

  • <!-- External CSS --> <link rel="stylesheet" href="code_guide.css"> <!-- In-document CSS --> <style> ... </style> <!-- External JS --> <script src="code_guide.js"></script> <!-- In-document JS --> <script> ... </script>

  • 属性顺序

    属性应该按照特定的顺序出现以保证易读性；

    • class
    • id
    • name
    • data-*
    • src, for, type, href, value , max-length, max,min, pattern
    • placeholder, title, alt
    • aria-*, role
    • required, readonly, disabled

    class是为高可复用组件设计的，所以应处在第一位；

    id更加具体且应该尽量少使用，所以将它放在第二位。

  • <a class="..." id="..." data-modal="toggle" href="#">Example link</a> <input class="form-control" type="text"> <img src="..." alt="...">

  • boolean属性

    boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；

  • boolean属性的存在表示取值为true，不存在则表示取值为false。
  • <input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>

  • JS生成标签

    在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。

  • 减少标签数量

    在编写HTML代码时，需要尽量避免多余的父节点；

    很多时候，需要通过迭代和重构来使HTML变得更少。

  • <!-- Not well --> <span class="avatar"> <img src="..."> </span> <!-- Better --> <img class="avatar" src="...">

  • 实用高于完美

    尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；

    任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

  • CSS, SCSS

  • 缩进

    使用soft tab（4个空格）。

  • .element { position: absolute; top: 10px; left: 10px; border-radius: 10px; width: 50px; height: 50px; }

  • 分号

    每个属性声明末尾都要加分号。

  • .element { width: 20px; height: 20px; background-color: red; }

  • 空格

    以下几种情况不需要空格：

    • 属性名后
    • 多个规则的分隔符','前
    • !important '!'后
    • 属性值中'('后和')'前
    • 行末不要有多余的空格

    以下几种情况需要空格：

    • 属性值前
    • 选择器'>', '+', '~'前后
    • '{'前
    • !important '!'前
    • @else 前后
    • 属性值中的','后

注释'/*'后和'*/'前

/* not good */ .element { color :red! important; background-color: rgba(0,0,0,.5); } /* good */ .element { color: red !important; background-color: rgba(0, 0, 0, .5); } /* not good */ .element , .dialog{ ... } /* good */ .element, .dialog { } /* not good */ .element>.dialog{ ... } /* good */ .element > .dialog{ ... } /* not good */ .element{ ... } /* good */ .element { ... } /* not good */ @if{ ... }@else{ ... } /* good */ @if { ... } @else { ... }

空行

以下几种情况需要空行：

 

    • 文件最后保留一个空行
    • '}'后最好跟一个空行，包括scss中嵌套的规则
    • 属性之间需要适当的空行，具体见属性声明顺序 
    • /* not good */ .element { ... } .dialog { color: red; &:after { ... } } /* good */ .element { ... } .dialog { color: red; &:after { ... } }

 

换行

以下几种情况不需要换行：

 

  • '{'前

 

以下几种情况需要换行：

 

      • '{'后和'}'前
      • 每个属性独占一行
      • 多个规则的分隔符','后
      • /* not good */ .element {color: red; background-color: black;} /* good */ .element { color: red; background-color: black; } /* not good */ .element, .dialog { ... } /* good */ .element, .dialog { ... }

 

注释

注释统一用'/* */'（scss中也不要用'//'），具体参照右边的写法；

缩进与下一行代码保持一致；

可位于一个代码行的末尾，与代码间隔一个空格。

 

        • /* Modal header */ .modal-header { ... } /*  * Modal header  */ .modal-header { ... } .modal-header { /* 50px */ width: 50px; color: red; /* color red */ }

  • 引号

    最外层统一使用双引号；

    url的内容要用引号；

    属性选择器中的属性值需要引号。

        • .element:after { content: ""; background-image: url("logo.png"); } li[data-type="single"] { ... }

    • 命名

        • 类名使用小写字母，以中划线分隔
        • id采用驼峰式命名
        • scss中的变量、函数、混合、placeholder采用驼峰式命名
        • /* class */ .element-content { ... } /* id */ #myDialog { ... } /* 变量 */ $colorBlack: #000; /* 函数 */ @function pxToRem($px) { ... } /* 混合 */ @mixin centerBlock { ... } /* placeholder */ %myDialog { ... }

 

属性声明顺序

相关的属性声明按下边的顺序做分组处理，组之间需要有一个空行。

 

          • // 下面是推荐的属性的顺序 [ [ "display", "visibility", "float", "clear", "overflow", "overflow-x", "overflow-y", "clip", "zoom" ], [ "table-layout", "empty-cells", "caption-side", "border-spacing", "border-collapse", "list-style", "list-style-position", "list-style-type", "list-style-image" ], [ "-webkit-box-orient", "-webkit-box-direction", "-webkit-box-decoration-break", "-webkit-box-pack", "-webkit-box-align", "-webkit-box-flex" ], [ "position", "top", "right", "bottom", "left", "z-index" ], [ "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "-webkit-box-sizing", "-moz-box-sizing", "box-sizing", "border", "border-width", "border-style", "border-color", "border-top", "border-top-width", "border-top-style", "border-top-color", "border-right", "border-right-width", "border-right-style", "border-right-color", "border-bottom", "border-bottom-width", "border-bottom-style", "border-bottom-color", "border-left", "border-left-width", "border-left-style", "border-left-color", "-webkit-border-radius", "-moz-border-radius", "border-radius", "-webkit-border-top-left-radius", "-moz-border-radius-topleft", "border-top-left-radius", "-webkit-border-top-right-radius", "-moz-border-radius-topright", "border-top-right-radius", "-webkit-border-bottom-right-radius", "-moz-border-radius-bottomright", "border-bottom-right-radius", "-webkit-border-bottom-left-radius", "-moz-border-radius-bottomleft", "border-bottom-left-radius", "-webkit-border-image", "-moz-border-image", "-o-border-image", "border-image", "-webkit-border-image-source", "-moz-border-image-source", "-o-border-image-source", "border-image-source", "-webkit-border-image-slice", "-moz-border-image-slice", "-o-border-image-slice", "border-image-slice", "-webkit-border-image-width", "-moz-border-image-width", "-o-border-image-width", "border-image-width", "-webkit-border-image-outset", "-moz-border-image-outset", "-o-border-image-outset", "border-image-outset", "-webkit-border-image-repeat", "-moz-border-image-repeat", "-o-border-image-repeat", "border-image-repeat", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "width", "min-width", "max-width", "height", "min-height", "max-height" ], [ "font", "font-family", "font-size", "font-weight", "font-style", "font-variant", "font-size-adjust",
标签：

相关文章