问题标签 [bem]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
525 浏览

html - Bem 命名约定

我在一个小项目中使用 BEM 命名约定,并且在决定元素和修饰符名称时有些困难。

我目前正在网站的英雄/飞溅部分工作。见下图在此处输入图像描述

这是我当前的代码 -

我的问题是——你明白这段标记在做什么吗?它是否符合他们的 BEM 方法。谢谢

0 投票
1 回答
78 浏览

ruby-on-rails - 在视图中大量使用方法会阻碍缓存吗?

我正在尝试在我的 Rails 4 应用程序中实现BEM助手,以帮助我更愉快地编写视图。

假设我们有以下Haml视图:

假设定义了和具有方法block的虚构类(其中的实例作为 传递),并假设是,我们应该得到以下 HTML 输出:BEMBlockBuilder#elementbcurrent_user.unregistered?true

这种技术应该可以设置块、元素并对其应用修改器,而不必每次都重复块的名称,并且它可以简单地基于绑定到它们的值是真实的来应用修改器。

该技术本身与使用帮助程序时发生的情况有些相似form_for,因为它将一个实例传递FormBuilder给块。


这种技术和form_for助手之间的主要区别在于,您最终可能会使用大量嵌套块来渲染视图,而这些视图的输出可能是未知的。

这种技术会影响 Rails(或 HAML)以负面方式执行缓存的能力,还是会损害总体渲染性能?

0 投票
1 回答
670 浏览

css - 具有常用样式的 BEM CSS

在使用全局样式时,我有点困惑。考虑以下:

假设我有一个样式表,它定义了如何制作按钮:

然后将模板中的按钮与标准 BEM 表示法一起使用(我将使用 Block__Element--Modifier 表示法)

像这样混合课程是可以接受的做法吗?我觉得我违反了一些封装块样式的规则。

0 投票
1 回答
212 浏览

bem - 边界元法。带修饰符元素命名的块

我有一个客户实体。有两种类型的客户:医生和药房。两者都有“姓名”、“地址”、“电话”、“电子邮件”字段。但医生还有“医学专业”和“医院”两个领域。医生和药剂师的风格几乎相同(除了医生的身高和特殊领域)。

我有“客户端”块(使用原始 BEM 符号)。

我的问题是我应该如何命名特殊的医生领域?

或者

或者应该另外有“医生”块,当客户是医生时我应该把客户和医生混在一起?

0 投票
3 回答
1697 浏览

html - 目标第一级
  • 通过在 BEM 中使用 LESS 嵌套规则
  • 我有以下 HTML:

    我有这个 css,是否可以用更少的方式做这样的事情:

    我会像这样用 BEM 用 LESS 写它:

    如何将 CSS 规则应用于第一<li>级?试过> &__item了,但似乎不起作用。

    更新:由我自己修复。我错过&了前面> &__item

    0 投票
    1 回答
    2254 浏览

    html - css transform() 弹出窗口问题的中心定位

    找到了一种在应用程序中制作居中弹出窗口(http://www.w3.org/Style/Examples/007/center)的有趣方法。代码简单美观(http://jsfiddle.net/babaca/6rwL0v0c/22/)。

    html

    css

    渲染的唯一问题:根据浏览器窗口的缩放级别,水平或垂直边不清晰,在 2 个像素之间平滑/模糊...(chrome 版本 39.0.2171.95 m,firefox 34.0.5)这里是一个例子(窗口的左右两侧平滑):

    在此处输入图像描述

    我发现这是transform: translate(-50%, -50%)线路的责任。有人遇到过同样的问题吗?有什么解决办法吗?

    0 投票
    1 回答
    3434 浏览

    css - 如何使用 BEM 正确设置元素的范围?

    给定以下 BEM 树结构,其中存在五个嵌套级别:

    根据 BEM 的命名约定,元素是块的一部分并且在它所属的块之外没有任何意义,那么命名author类的正确方法是什么?

    由于 anauthor在语义上与bylineandstory上下文相关,但在features-topandcollection-main块下没有意义,那么最好的 BEM 名称是什么?

    如果features引入了新区块会发生什么?

    最后,如果collection添加了另一个块并且我们想要为列表中的第二个作者元素设置样式会发生什么?

    我们会做这样的事情吗?

    一定有更好的选择。

    0 投票
    1 回答
    190 浏览

    less - 文件级少变量

    我想在其文件的开头立即定义块名称

    然后在选择器中使用它

    但是当我有多个街区时,我不能这样做。变量@block采用最后一个值,它破坏了我的选择器

    .widget-b尽管文件不同,但这两个规则集都被阻止了。有没有办法为每个块保留名称?

    这是一个要点:https ://gist.github.com/just-boris/a86f3646f48683a9bf17可以构建和复制它。我用less 2.3.0

    0 投票
    1 回答
    1756 浏览

    sass - 在 SASS 实现中覆盖 BEM 元素修饰符

    这让我困惑了一段时间。

    我们使用 Sass (SCSS) 并在 lib-sass 上实现类似 BEM 的命名约定。

    因此,例如,我们有:

    并且可能description--special想要执行以下操作:

    自然会出现特异性问题,因为预期用途是:

    有人可以提出一种足够优雅的方法吗?

    当前的“最佳”建议是这样做:

    因为,当然,至少在lib-sass中,这是行不通的:

    这也不是:

    0 投票
    1 回答
    712 浏览

    sass - 父母特异性的sass父母

    我以 BEM 样式编写 CSS 并拥有以下代码:

    我如何从上面的代码中获取.nav .nav__link--active和获取.nav__link.nav__link--active?我怎样才能通过这种方法提高特异性?