js和css命名规范

JavaScript

命名规则：

变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（ lowerCamelCase）
常量 (如 USER_INFO) 为大写 (UPPERCASE ) ＋下划线连接

变量名

变量名推荐使用驼峰法来命名(camelCase)。


示例：

let userName = 'lili';

常量

驼峰＋下划线连接


示例：

const USER_INFO = 'USER_INFO';

方法名

方法使用驼峰法来命名(camelCase)。

前缀应当为动词。可使用常见动词约定。

| 动词 | 含义 | 返回值 |

-------- | -----: | :----:

| can | 判断是否可执行某个动作(权限) | 函数返回一个布尔值。true：可执行；false：不可执行 |

| has | 判断是否含有某个值 | 函数返回一个布尔值。true：含有此值；false：不含有此值 |

| is | 判断是否为某个值 | 函数返回一个布尔值。true：为某个值；false：不为某个值 |

| get | 获取某个值 | 函数返回一个非布尔值 |

| set | 设置某个值 | 无返回值、返回是否设置成功或者返回链式对象 |

| load | 加载某些数据 | 无返回值或者返回是否加载完成的结果 |


示例：

// 是否可阅读

function canRead() {

  return true;

}

// 获取名称

function getName(name) {

  return name;

}

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格。


示例：

let x = y + z;

let arr = ["aa", "bb", "cc"];

代码缩进

通常使用 4 个空格符号来缩进代码块。

垂直空行

变量、if、forEach、while 等，中间应使用空行。


示例：

let num = 10;

if (num === 10) {

    // code

}

语句规则

简单语句的通用规则:

一条语句通常以分号作为结束符。


let arr = ["Volvo", "Saab", "Fiat"];

let userInfo = {

    firstName: "li",

    lastName: "zhong",

    age: 20

};

复杂语句的通用规则:

将左花括号放在第一行的结尾。
左花括号前添加一空格。
将右花括号独立放在一行。
不要以分号结束一个复杂的声明。


function getNum(num) {

    return num;

}

对象规则

对象定义的规则:

将左花括号与类名放在同一行。
冒号与属性值间有个空格。
字符串使用双引号，数字不需要。
最后一个属性-值对后面不要添加逗号。
将右花括号独立放在一行，并以分号作为结束符号。


let userInfo = {

    firstName: "li",

    lastName: "zhong",

    age: 20

};

每行代码字符小于 80 或者 120 字符

为了便于阅读每行字符建议小于数 80 或者 120 个。

如果一个 JavaScript 语句超过了 80 或者 120 个字符，建议在运算符或者逗号后换行。

避免 == 的使用

== 会发生隐式类型转换，推荐使用 === 。


示例：

if (age === 20) {   

    // code

}

减少魔鬼数字

魔鬼数字的定义：在代码中没有具体含义的数字、字符串。

魔鬼数字主要影响了代码可读性，读者看到的数字无法理解其含义，从而难以理解程序的意图。当程序中出现的魔鬼数字过多时，代码的可维护性将会急剧下降，代码变得难以修改，并容易引入错误。


示例：

if (code === 1) {

    // code

}

解决办法：使用常量代替魔鬼数字；


示例：

if (code === NET_CODE) {

    // code

}

注释的使用规则

单行注释以 // 开头。


示例：

// 姓名

const userName = 'abc';

多行注释以 /* 开头，以 */ 结尾。


示例：

/*

* 这里就是注释1

* 这里就是注释2

* 这里就是注释 ...

*/

使用 ES6 简化代码

ES6 简化代码的形式很多，自行去 Google 查询；


let {userName = '', age = 0 } = userInfo;


let userName = 'abc';

let age = 20;

let userInfoStr = `${userName} ${age}`;

CSS

CSS 采用 BEM 命名规范；

BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称。

使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长）。

如何使用BEM：

1、一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block）
2、属于块的某部分，可作为一个元素（Element）
3、用于修饰块或元素，体现出外形行为状态等特征的，可作为一个修饰器（Modifier）

在本规范中，以横线 - 来作为块和元素的间隔，以双下划线 __ 来作为块和修饰器或元素和修饰器的间隔，以中划线 - 来作为块|元素|修饰器名称中多个单词的间隔

保证各个部分只有一级 B-E__M ，修饰器需要和对应的块或元素一起使用，避免单独使用。

HTML 书写


示例：

<!-- 某个块 -->

<form class="search-form">

    <!-- 某个元素 -->

    <div class="search-form__content-left">

        <!-- 错误：不能出现多个元素 -->

        <h2 class="search-form__content-left__h2">标题</h2>

        <!-- 某个元素，虽然是子集，保证了只有一级元素 -->

        <input class="search-form__input">

        <!-- 某个元素，加上了hover修饰器 -->

        <button class="search-form__button search-form__button_hover">搜索</button>

        <button class="search-form__button-set search-form__button-set_hover">搜索1</button>

        <!-- 错误：不能单独使用lg修饰器 -->

        <button class="search-form__button_lg">搜索</button>



        <!-- 块中可嵌套着另一个块 -->

        <p class="my-img">

            <img class="my-img__logo" src="abc.png" alt="image" title="image">

        </p>



    </div>

</form>

<div class="search-result"></div>

在CSS文件中使用：


.search-form {

    position: relative;

}

.search-form__input {

    font-size: 12px;

}

.search-form__button_hover {}

/* 避免：避免使用不必要的嵌套（此处只是简单的嵌套，没有必要） */

.search-form__content-left .search-form__input {}

/* 稍好的嵌套（此处是在块的theme1修饰器下的子元素，某些时候有必要） */

.search-form_theme1 .search-form__input {}

/* 错误：使用了标签 */

button.search-form__button {}

.search-form button {}

在Stylus文件中书写

而在Stylus文件中，也需要注意嵌套层次的意义，尽量按照 BEM三层来


/* 避免这样做 .search 不是一个独立的块 */

.search {

    /* 应该把这个块提取出来 */

    &-form {

        &__button {

            &_hover {}



            /* 应该把这个元素提取出来 */

            &-set {

                &_hover {}

            }

        } 

    }

    &-result {



    }

}

/* 建议这样,按照各级区分出来 */

.search-form {

    &__button {

        &_hover {}

    }



    &_button-set {

        &_hover {}

    }

}

.search-result {

}

/* 对于嵌套在块中的块，如果非常有必要，可以嵌套写样式 */

.search-form {

    .my-img {

        &__logo {}

    }

}

/* 但一般来说，不建议，因为这破坏了块的独立性。可转换成设置对应的 元素来表现，如 */

.search-form {}

.my-img {

    &__search-form-logo {}

}

CSS网页公共样式命名

| CSS样式命名 | 说明 |

-------- | -----: |

| wrap | 用于最外层 |

| header | 用于头部 |

| main | 用于主体内容（中部） |

| main-left | 左侧布局 |

| main-right | 右侧布局 |

| nav | 网页菜单导航条 |

| content | 用于网页中部主体 |

| footer | 用于底部 |

| menu | 菜单 |

| submenu | 子菜单 |

| sideBar | 侧栏 |

| tag | 标签 |

| message | 提示信息 |

| tips | 小技巧 |

| vote | 投票 |

| friendlink | 友情连接 |

| title | 标题 |

| summary | 摘要 |

| loginbar | 登录条 |

| hot | 热门热点 |

| search | 搜索 |

| copyright | 版权信息 |

| logo | 网站LOGO标志 |

| regsiter | 注册 |

| arrow | 箭头 |

| scroll | 滚动 |

| status | 状态 |

| banner | 广告位 |