前言:
在小型项目中,css样式命名只要遵循基本规则,即可灵活合理运用。但在中大型项目中,如果没有统一的命名规范和代码风格,页面一多,将会很难维护和理解,甚至出现重复命名导致样式覆盖、代码污染的问题。为此,基于bem命名规范,提供了这样一套css命名规则。
说明:
bem命名规范掘金原地址:https://juejin.im/post/5b925e616fb9a05cdd2ce70d
要点:
1、尽可能在页面中使用 scoped 方式,避免各组件样式污染
2、组件内的样式,尽可能将所有样式包裹在一个组件名命名的class内
3、覆盖element样式,在scoped方式下,使用/deep/,特殊需求注明备注
4、自己原本的高级别的块命名,还是用单个中划线连接pc-preview,pc-contnet-title
5、它的后代,用__两个下划线表示一个整体 pc-preview__content,但避免过长的层级嵌套
6、某一个块的不同状态,用两个连字符,如pc-preview--hide pc-preview--show
7、并不是每个地方都应该使用 BEM 命名方式。当需要明确关联性的模块关系时,应当使用 BEM 格式。
重点:
Bem 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论
1、- 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。
2、__ 双下划线:双下划线用来连接块和块的子元素
3、_ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态
4、-- 两个连字符:某一个块的不同状态,用两个连字符,如pc-preview--hide pc-preview--show
示例:
嵌套中的命名