BEM命名方式
BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目。
Block区块:一个逻辑和功能兼备的独立页面组件,也可以称为web组件
嵌套结构:
区块之间可被嵌套使用。
随意处置:
区块可以被放在页面的任何位置,也可以在页面或者项目之间相互移动。区块的实现靠的是独立的实体,所以允许开发着放在改变其位置,保证整体的功能和外观的效果。
重用:
允许多个相同的区块实例同时存在于一个界面里。
Element:区块中无法被用在其他组件上的部分
某个菜单子项是无法用于菜单区块以外的地方的,所以它属于元素。
Modifier:区块或者元素的外观样式和行为
是否使用修饰符,你可以自由选择。修饰符本质上和HTML的属性类似,相同的区块因为其使用的修饰符不同而不尽相同。
例如:菜单区块的外观可能会因为其所依赖的修饰符变化而发生改变。
具体实现:
模块:.Block
模块+状态:.Block_Modifier
模块+子元素:.Block-Element
模块+子元素+状态:.Block-Element_Modifier
命名:
模块:名词;
修饰:大小/尺寸/颜色/形状/新旧/状态 之类的形容词;
绝不能用表象的具体词汇!如主色是蓝色,不能.blue
,可以.primary
,指不定换成红色了!
参考文章:
block是区块的意思吧?
良好的命名,便于学习!
想和贵站交换友情链接,可否?