• 前端代码基本命名规范和格式规范


    1、HTML代码命名规范及格式规范

    1.1     HTML代码所有的标签名和属性应该都为小写,属性值应该使用双引号闭合。

    <!--推荐示例-->
    <
    img src="demo.ipg" alt="test"/>

    1.2    给所有的关键元素定义元素的id和class,便于和CSS、JavaScript交互。id和class的命名一定要规范。

             推荐:根据语义和DOM树的层级关系来定义合适的名称。名称中全部使用小写,id名称中的关键词用下划线(_)连接,class的关键词用中划线(-)连接。

    <!--推荐示例-->
    <div id="reader">
         <div id="reader_introduce" class="reader-introduce">
              ...
         </div>
    </div>

    1.3    如果class名称仅作为JavaScript调用的“钩子”,则可在名称中添加“js”前缀

    <!--示例-->
    <
    ul class="js-reader-menu"> <li class="menu-toc js-active">Toc</li> <li class="menu-store js-active">Store</li> </ul>

    1.4    HTML代码的层级缩进为4个空格。如果元素包含子元素,则此子元素对应的起始标签和闭合标签分别单独占用一行。

        <!--推荐示例-->
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
        </ul>

    1.5    注释添加的位置在要注释的代码上部并单独占用一行,不要再代码行的后面直接添加。

    <body>
        <!--main header-->
        <div id="reader_header">
            ...
        </div>
        <!--main content-->
        <div id="reader_content">
            ...
        </div>
    </body>

    2、CSS命名规范及格式规范

    2.1    为了避免class命名的重复,命名时取父元素的class名作为前缀。

    /*父元素的样式声明*/
    .reader-content {
        ...
    }
    
    
    /*子元素的样式声明*/
    .reader-content-body {
        ...
    }

    2.2     在CSS样式定义中,左大括号放置在选择器的同一行,并和选择器之间添加一个空格分隔;在样式声明中,属性名和值之间使用一个空格分隔。

    /*推荐示例*/
    .reader-content-title {
        background: #fff;
        ...
    }

    2.3    多个选择器具有相同的样式声明时,每个选择器应该单独占一行,便于阅读和维护。

    /*推荐示例*/
    h1,
    h2,
    h3 {
        font-weight: normal;
        line-height: 1.2;
    }

    2.4    样式声明的顺序按字母顺序排序,不考虑浏览器前缀。建议使用一些CSS美化工具做样式声明的排序工作。

    3、JavaScript命名规范及格式规范

    3.1    JavaScript的局部变量命名采用首字母小写,其他单词字母大写的方式。

    //推荐示例
    var bookmarkDefaultTitle = 'Untitled Bookmark';

    3.2    原则上公有接口的命名为首字母大写,私有接口的命名为首字母小写。

    3.3    JavaScript中推荐使用单引号定义字符串。

    //推荐示例
    var content = '<span id="main_content">...';

    3.4    JavaScript语句结束时应该添加一个分号。

    3.5    单行注释建议使用//,多行注释使用/**/。



  • 相关阅读:
    demo
    Git
    rest-framework框架 -- 认证权限流程源码
    sublime
    restful 协议 +面试
    Django的CBV
    vue 之 vue-router
    vue 之node.js 02
    浏览器内核
    安装apache+php+mysql
  • 原文地址:https://www.cnblogs.com/209yin/p/7651240.html
Copyright © 2020-2023  润新知