【问题标题】:BEM multiple classes selectorBEM 多类选择器
【发布时间】:2016-02-25 13:04:33
【问题描述】:

我正在尝试遵循 BEM 命名约定,但我不确定如何实现以下内容:我有一个“工具提示”块,应该使用不同的主题进行样式设置。假设我应用了一个“默认”主题。

<div class="tooltip tooltip_theme_default"></div>

工具提示可以放置在不同位置的元素周围,这听起来像是我必须在块中添加“水平位置”和“垂直位置”修饰符。

<div class="tooltip tooltip_theme_default tooltip_horizontal-position_center tooltip_vertical-position_top"></div>

现在我需要在工具提示上显示一个装饰,这取决于主题及其位置。我想我需要一个多类选择器,但我在 BEM 文档中看不到任何这样的多类选择器示例。

.tooltip_theme_default.tooltip_horizontal-position_center.tooltip_vertical-position_top::before {
     /* styles */
 }

BEM 规范是否允许这样做?
你能想到任何缺点吗?
我是否应该尝试重新考虑我的组件以仅使用平面类选择器?

【问题讨论】:

    标签: css bem


    【解决方案1】:

    尽管 BEM 建议避免使用多个类选择器,但在您的情况下它就可以了。您可以使用bem-components library 作为示例来源。例如。 https://github.com/bem/bem-components/blob/v2/design/common.blocks/popup/_theme/popup_theme_islands.styl#L22

    【讨论】:

    • 我只是第一次尝试使用 BEM,我想了解它是否有利于我公司的更大采用,但老实说,我很惊讶我尝试实施的第一个组件已经需要“打破”约定。在我看来,这是一个非常严格的框架。既然你声称对它上瘾,我想听听你的意见,也许在chat.stackoverflow.com
    • 我最好邀请您参加我们的论坛en.bem.info/forum(通过 github 授权)。会尽我所能提供帮助。
    猜你喜欢
    • 1970-01-01
    • 2014-12-05
    • 2017-10-04
    • 1970-01-01
    • 1970-01-01
    • 2017-03-11
    • 2021-09-29
    • 2011-03-10
    • 1970-01-01
    相关资源
    最近更新 更多