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