rct*_*eil 7 css components sass bem
我一直在工作项目中使用BEM来保持我的CSS更加模块化并遇到一些情况我觉得需要对它进行一些澄清:
依赖上下文的样式 我一直想要改变依赖于父项的类的模块/组件的样式.
说我是一个产品清单.我有我的.product-list组件,里面是我.product-list__item的全部.该.product-list__item的那么可能有一个<h3>内部的产品称号.
我的问题是:
应该.product-list__item还有一类.item吗？
产品内的标题是否应具有以下类别:
.item__title ？.product-list__item__title ？假设该项目中还有一个描述框,其中包含价格:
.item__description ？.product-list__item__description ？价格应该是:
.item__description__price ？.description__price ？.price ？我做的子组件有点需要自己的组件名称添加separatley即:.item或.description.我猜他们需要它们,以及它们应用其样式的其他地方？
另外,如果我有上面的内容,我会有一个.product-list组件,但是如果子组件有自己的组件名称作为一个类添加,.item那么它本身不是很具描述性的吗？
我知道这可能听起来很复杂,但我很认真地在这里感到困惑,并且很想听听你的意见.我读了很多关于BEM的文章而没有人解释过这类事.
尼尔
根据BEM方法,没有元素的元素,所以不product-list__item__title应该使用product-list__item-title.
对于依赖于上下文的样式,您可以使用级联(并将样式放置到父文件)或在示例中混合使用.规则很简单:只要你发现自己在没有父块的情况下使用某个项目 - 将其单独使用并使用混合,但如果没有使用级联的父级则更有意义.