在BEM中使用HTML5语义元素是一种好习惯吗？例如是
<header class="header header--full">
<nav class="header__nav">...</nav>
</header>
好吧或者我应该使用div而不是？
所以我有以下BEM类：
.block
.block--modified
.block__child
现在，从我所看到的大多数人会这样命名修改后的孩子.block：
.block--modified__child
我知道这是有道理的，但是否有一个原因您无法这样命名：
.block__child--modified
我认为这样看起来更好，并使修改更孤立/更明确，我也喜欢这样，因为这样您可以拥有多个修改后的子级，而这些子级不依赖于被修改的父级
我们可以有.block和.block .block--modified元素。
两者都可以具有.block__child并且.block__child--modified仍然遵循命名约定，但是使子元素（无论是否修改）都更加灵活。
举一个更好的例子，我有以下课程：
.alert
.alert--warning
.alert--urgent
.alert__call-to-action
.alert__call-to-action--warning
我想按如下方式布置HTML：
<div class="alert">
<button class="alert__call-to-action">
Action! (No Modifier)
</button>
</div>
<div class="alert alert-warning">
<button class="alert__call-to-action alert__call-to-action--warning">
Action! (Warning Modifier)
</button>
</div>
<div class="alert alert-urgent">
<button class="alert__call-to-action alert__call-to-action--warning">
Action! (Warning Modifier)
</button>
</div>
因此，您将看到我想在和中重复使用.alert__call-to-action--warning修饰符两次.alert--warning，.alert--urgent因为无论出于何种原因，样式都是相同的。从我看到的意义来看，这使修饰符更加有用吗？
我们不这样做是有原因的吗？抱歉，如果有更好的发布位置，请告诉我。
我正在使用BEM,并且有一个包含多个修饰符的元素:
<div class="block__element block__element--m1 block__element--m2"></div>
我正在使用SCSS并利用它来编写与BEM兼容的嵌套规则.如果我想编写一个规则,其中元素(如上所述)同时具有m1和m2修饰符,是否有一种方法可以编写与我当前编写它们的方式兼容的方法？这是我之后的语法,但会导致语法错误:
.block {
display: block;
&__element {
display: inline;
&--m1 {
background-color: red;
}
&--m2 {
background-color: green;
}
// Syntax error
&--m1&--m2 {
background-color: yellow;
}
}
}
我可以通过使用属性选择器来想办法,但有更简洁的方法吗？
对于记录,编译的属性选择器应该是:
.block__element--m1.block__element--m2
一直在努力学习BEM,虽然我知道BEM不仅仅是CSS,但它似乎是一个最好的起点.
所以我做了一些基本的preloader css:https: //jsfiddle.net/ygz931s7/
并修改它以符合BEM符号:https: //jsfiddle.net/af36921w/
有问题的部分是loaded从js方面简化了东西的类,我不知道如何做'BEM'.
我的尝试导致了这个:https: //jsfiddle.net/rd40ve3m/
我的问题是:
有一个更好的方法来做到这一点.在最后的例子中,我需要修改几个元素并知道要使用的特定类,在原始示例中我需要添加一个类.
那么有更好的"BEM" - 这样做的方式吗？
这是上一个例子中提到的代码:
HTML:
<div class="container">
<div class="loader">
<div class="loader__element loader__element--left"></div>
<div class="loader__element loader__element--right"></div>
</div>
</div>
CSS:
.loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.loader__element {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: black;
z-index: 1000;
transform: translateX(0);
}
.loader__element--left {
left: 0;
}
.loader__element--right {
right: 0;
}
/* …我正试图绕过BEM,即使是最基本的东西,我也遇到了麻烦.比如菜单.
考虑这段代码
<ul class="menu">
<li class="menu__item">
<a href="/what">What</a>
</li>
<li class="menu__item">
<a href="/why">Why</a>
</li>
<li class="menu__item">
<a href="/how">How</a>
</li>
</ul>
ul是块,li是元素,但我该怎么做锚？既然我需要li和a风格,li必须至少被设计为内联,a必须是块和东西.我可以制作aa .menu_item,但是我如何设计那样li,因为我不应该在css中使用元素选择器,因为菜单块应该适用于任何html元素,就像.menu li {}我会决定使用说的那样div和a组合,无意义..
那么我该如何以"正确"的方式做到这一点呢？
有点不确定何时在BEM中开始新的上下文.
所有子元素是否应始终引用块元素？
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bem</title>
</head>
<body>
<div class="header">
<div class="header__left">
<!-- Left column content -->
</div>
<div class="header__search">
<!-- Should this be attached to the header? Or a new context <div class="search"> as it can be used elsewhere on the site? -->
</div>
</div>
</body>
</html>
这里的搜索位于'header'div中,但是我们是否真的将它附加到标题中,因为这可以在网站的其他地方使用？
你在街区内有新的街区吗？
干杯
使用 CSS BEM 方法...
假设我有一些 HTML，像这样（这只是为这个问题组成的示例 HTML）：
<section>
<div>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
</div>
</section>
从我读过的内容来看，我应该这样做：
.section { ... }
.section__sometext { ... }
.section__text { ... }
<section class="section">
<div class="section__sometext">
<p class="section__text">Text.</p>
<p class="section__text">Text.</p>
<p class="section__text">Text.</p>
<p class="section__text">Text.</p>
<p class="section__text">Text.</p>
</div>
</section>
而不是这样：
.section {}
.section__sometext { ... }
.section__sometext p { ... }
<section class="section">
<div class="section__sometext">
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
</div>
</section>
可以使用.section__sometext p { ... }..吗？
我p遇到的问题是可能有很多很多's，并且给它们所有长的类名似乎是浪费时间和标记。
使用.section__sometext …
我正在根据BEM 约定在我的 Web 应用程序中构建 CSS 。
我有一个名为的块item和 3 个元素：item__section,item__title和item__description。
我使用这些 BEM 类如下：
<div class="item">
<div class="item__section item__title"> ... </div>
<div class="item__section item__description"> ... </div>
</div>
该item__section要素类包含的风格，我们元素之间的重用。
这是有效的 BEM 还是我应该item__section为每种类型的部分（标题和描述）创建一个修饰符？
想象一个更传统的 Web 应用程序，它正在一个复杂到足以需要它的页面中慢慢引入 React 组件。
我们正在使用 Webpack 开发这个新的 UI，并且我们使用 css 模块来实现新 UI 所需的所有新 css。但我们仍然需要重用一些全局的 css，并通过 html 中链接的传统 css 样式表在应用程序中提供。
因此，我们需要在 css 模块中偶尔编写引用全局命名空间中的 css 类的规则，而不是本地范围内的类，因此在应用程序运行时转换为更像 gem 的长 css 类名：
.container {
// rules for container
}
.container.pull-right {
// rules for when the container element also has the pull-right class
}
在上面的示例中，container它是一个 css 类，css 模块将使用该模块将其上下文化到特定组件。
但是pull-right是存在于页面中可用的 css 文件中的类，但不被 css 模块或 Webpack 处理。因此，我们需要一种方法（可能是语法）来告诉 css 模块“嘿，保持pull-right输出中的原样。不要弄乱它或尝试将其删除”。
我想这样的东西应该存在，但到目前为止我还没有通过谷歌搜索找到它。
我有一个名为“用户导航”的元素
目前我有
.header__user-nav
带修饰符
.header__user-nav--active
元素名称使用单下划线是否更好
.header__user_nav--active
或连字符
.header__user-nav--active
或驼色
.header__userNav--active