BEM命名规则和规范
切勿将标记 CSS 样式的 class 用作 JavaScript 钩子。把js行为与样式混在一起将无法对其分别处理。
如果你要把js和某些标记绑定起来的话,写一个js专用的 class。简单地说就是划定一个前缀 .js- 的命名空间,例如 .js-toggle,.js-drag-and-drop。这意味着我们可以通过 class 同时绑定 JS 和 CSS 而不会因为冲突而引发麻烦。
如:<div class="is-sortable js-is-sortable"></div>
命名约定的模式如下:
.block{}
.block__element{}
.block--modifier{}
.block 代表了更高级别的抽象或组件。
.block__element 代表.block的后代,用于形成一个完整的.block的整体。
.block--modifier代表.block的不同状态或不同版本。
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
//代表当前所有的标签 通配符(兼容任何浏览器打开页面内容的边距都为0)。目前最常用的是Normalize.css ,它是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准。它正是针对只需要统一的元素样式,依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样式。
5.根据属性的重要性按顺序书写