CSS 命名规范
BEM 命名法
BEM(Block, Element, Modifier)是由 Yandex 团队提出的一种前端命名规范。其核心思想是将页面拆分成一个个独立的富有语义的块(blocks), 从而使得团队在开发复杂的项目变得高效,并且十分有利于代码复用,即便团队引入新成员,也容易维护。
Block是块,比方说 div
、header
,可以嵌套复用。更严格一点来说不能影响自身布局,最好不要设置margin
和position
,也不要使用元素选择器和 ID 选择器。
Element是元素,比方说 input
、p
。是Block 的组成部分。
Modifier是修饰,定义 Block 和Element的外观、状态、或者行为。当然这个部分并不是必须的,可以省略。
Block与 Element 之间通过 __
来连接,Element与 Modifier 之间通过 --
来连接
总体就是Block__Element–Modifier
何时用 Element 何时用Block
如果一段代码可能被重用,并且它不依赖于页面中的其他组件,这时就可以使用Block,反之就可以使用Element。
JavaScript 代码风格
推荐去看 Aribnb 地址。