这是CSS的许多模块化解决方案.我列出了一些主题,但可能还有更多.您如何选择用于新项目的项目？有比较吗？
我开始使用BEM方法[BLOCK,ELEMENT,MODIFIER],我对它有疑问.
在一个名为"参与"的部分中,我有一个表单,所以:
<section class="participate">
<form class="participate__form">
<label for="name" class="participate__form__label"></label>
<input type="text" id="name" name="participate__form__input"/>
</form>
</section>
而CSS:
.participate {
&__form {
// css here
}
&__form__label {
// css here
}
&__form__input {
// css here
}
}
表格中的类太大了,所以告诉我权利会深入一层:
<section class="participate">
<form class="participate__form form">
<label for="name" class="form__label"></label>
<input type="text" id="name" name="form__input"/>
</form>
</section>
但是我该如何设计呢？
我这样使用它:
.participate {
.form {
// CSS HERE
&__label {
// CSS HERE
}
&__input {
// CSS HERE
}
}
}
但我真的相信这不是正确的做法.拜托,有人可以给我一个灯吗？
这是一个理论上的问题,但它现在让我困扰了几个小时.
我正在学习BEM,到目前为止它很棒,但我有一个问题.假设我有这段代码:
<div class="section-hi main-section">
<h2 class="main-section_header">Blah</h2>
<p>Generated from the CMS</p>
</div>
我如何针对pBEM做好准备？我可以跟你一起去吧
.main-section p
或者这会违反规定？我找不到任何答案,因为每个关于BEM的例子和文章都只关注类,我不能指望我的CMS为每组段落添加不同的类.
采取以下结构:
<div class='article article--yellow'>
<div class='article__headline'>...</div>
</div>
<div class='article article--blue'>
<div class='article__headline'>...</div>
</div>
如果我需要article__headline为不同--yellow的--blue,我应该做一个CSS选择器,如:
.article--yellow .article__headline { ... }
或者,在最小化选择深度的实践中,将标记更改为此是否有效的BEM语法:
<div class='article article--yellow'>
<div class='article--yellow__headline'>...</div>
</div>
因为那时我只能使用1个选择器来选择它:article--yellow__headline.
我知道技术上它会起作用,但我无法弄清楚这是否有效根据BEM方法.
使用 BEM CSS 类语法，假设我有一个具有以下类的元素：
...
<div class="purchase__module2__heading__tooltip">...</div>
...
现在让我们说有一个事件或某些东西使这个“工具提示”变得活跃或可见。用 BEM 表达这一点的正确方法是什么？我是否替换当前类，所以现在它变成：
...
<div class="purchase__module2__heading__tooltip--active">...</div>
...
或者我添加它
...
<div class="purchase__module2__heading__tooltip purchase__module2__heading__tooltip--active">...</div>
...
或者我可以做一些像这样简单的事情：
...
<div class="purchase__module2__heading__tooltip active">...</div>
...
我认为答案是#2，但它似乎很牵强。#3 很好也很简单，但我不知道这是否遵循适当的 BEM 指南。
想知道 BEM 方法是否正确。假设我有一个组件/块“盒子”。
<div class="box">
<div class="box__title">Box Title</div>
</div>
这个盒子可以在任何地方使用。但是例如这个框也可以用在列表中。
<ul>
<li>
<div class="box">
<div class="box__title">Box Title</div>
</div>
</li>
</ul>
像这样调用 DOM-Classes 是正确的吗？
<ul class="box__list">
<li class="box__item">
<div class="box">
<div class="box__title">Box Title</div>
</div>
</li>
</ul>
所以“box__list”和“box__item”不知何故在块“box”之外。“box__item”然后有一些特定的东西。
.box__item {
margin-bottom: 20px;
}
这样做是“允许”的，或者我在这里需要完全不同的东西，比如“box-wrapper__list”和“box-wrapper__item”。
感谢您的评论。:)
请问是否可以设置内部元素的scss？我不想使用.box__something,但我需要修改依赖于父修饰符的子项
<div class="box">
<div class="box__something">Hello</div>
</div>
<div class="box box--rounded">
<div class="box__something">Hi</div>
</div>
.box {
&__something {
background: blue;
}
&--rounded {
background: green;
.box__something { // <<< Is some better selector?
background: pink;
}
}
}
由于人们仍然建议将 BEM 用于更大的项目，我想我可以试一试。但是我已经通过设置header页面的-element遇到了问题。
这是页面标题现在的样子：
<header class="header">
<img class="header__logo" src="logo.png" alt="alt">
<button class="header__button-toggle" type="button">Open menu</button>
<nav class="header__nav" role="navigation">
<ul>
<li><a href="">Nav item A</a></li>
<li><a href="">Nav item B</a></li>
<li><a href="">Nav item C</a></li>
</ul>
</nav>
</header>
我了解如何定义简单的元素，例如header__logo或header__button-toggle。
但是，当涉及到nav-element时，我不确定该怎么做。HTML 不会改变，因为这是一种常见且广受认可的模式，我猜在 5 年内会保持不变。
现在，我不仅需要将样式应用于nav-element，还需要将样式应用于ul、theli和a-elements。我该怎么做呢？
我会在 Less 中这样做：
.header {
&__nav {
property: value;
ul { property: value; }
li { property: value; }
a { property: value; }
} …据我所知,BEM根本不使用元素id.但是在这种情况下如何处理带有/ id的标签和输入？如果不使用id,使用屏幕阅读器的人将无法获得该标签用于该输入.我对吗？
在 gruntfile 中
stylelint: {
all: ['app/styles/**/*.scss']
},
.stylelintrc
{
"plugins": [
"stylelint-selector-bem-pattern"
],
"rules": {
"plugin/selector-bem-pattern": {
"componentName": "[A-Z]+",
"componentSelectors": {
"initial": "^\\.{componentName}(?:-[a-z]+)?$",
"combined": "^\\.combined-{componentName}-[a-z]+$"
},
"utilitySelectors": "^\\.util-[a-z]+$"
}
}
}
/Users/jitendravyas/app-test/styles/components/_campaign-settings-integrations.scss
/* @define campaign-settings */
.campaign-settings__integrations {
@include flex;
}
.campaign-settings__integration {
border: 1px solid $color-green;
border-radius: 3px;
color: $color-green;
margin-right: $base-spacing-unit;
@include flex;
.check {
background: $color-green;
color: white;
@include vertical-center;
}
> div {
padding: $half-spacing-unit;
}
}
运行 stylelint 时没有出现任何错误。Stylelint 正在处理其他规则。