开发规范之命名规范和编写规范

BEM命名方式

BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范。其核心思想是将页面拆分成一个个独立的富有语义的块（blocks），从而使得团队在开发复杂的项目变得高效，并且十分有利于代码复用，即便团队引入新成员，也容易维护。在某种程度上，BEM和OOP是相似的。
BEM其实就块（block）,元素（element），修饰符（modifier）的缩写，利用不同的区块，功能以及样式来给元素命名，这是三个部分使用__与–连接（这里使用两个而不是一个是为了留下用于块的命名）。命名约定的模式如下

.block()
.block__element()
.block--modifier()

• block 代表了更高级别的抽象或组件
• block__element 代表 block的后代，用于形成一个完整的block的整体
• block–modifier 代表 block 的不同状态或不同版本

下面是常规命名下写的代码：

<form class="site-search full">
	<input type="text" calss="field">
	<input type="Submit" value="Search" class="button">
</form>

下面是使用BEM规范去写的代码：

<form class="site-search site-search--full">
	<input type="text" calss="site-search__field">
	<input type="Submit" value="Search" class="site-search__button">
</form>

对比一下不难发现使用BEM可以是我们的代码可读性更高
参考链接https://segmentfault.com/a/1190000006031855

OOCSS

OOCSS不是一个框架，也不是一种技术，更不是一种新的语言，它只不过是一种方法，一种书写方法，换句话说OOCSS其核心就是用最简单的方式编写最整洁，最干净的CSS代码，从而使代码更具有重用性，可维护性和可扩展性。

• OOCSS适合真正的大型网站开发因为大型网站用到的可重性租借特别的多，如果运用在小型项目中可能见不到什么成效。
• 如果没有巧妙的使用，创建组件可能对我们来说是一堆没用的东西，成为一烂摊子，给我们的维护带来意想不到的悲剧，说不定还是个维护的噩梦。

Eslint

ESlint这样的可以让你在编码的过程中发现问题，并且可以自己创建检测规则，保持代码编写风格的一致性。
参考链接https://www.cnblogs.com/my93/p/5681879.html

目录规范

参考链接https://segmentfault.com/blog/jeanchueng