Question

：）

重置课程

假设我有一个_base.scss并且有

ul { 
     margin-top: 20px;
     margin-bottom: 10px;
}

BEM中最好的方法是重置相同的东西。我读到全球课程不是“允许的”。我是否必须做一个scss-placeholder（％resetUl），然后扩展ul-list或者是这里允许的某种全局类？恩。

<ul class="resetUl">
    <li class="resetLi">
</ul>

BEM混合或修饰符： 我有两个相似的按钮。一个按钮，16px，另一个按钮，字体大小为20px。小的（16px字体大小）总是在另一个组件里面。我必须在这里做混合或修饰吗？

混合物：

<div class="header">
    <a class="header__item btn"></div>
</div>

改性剂：

<div class="header">
    <a class="btn btn--small"></a>
</div>

如果设计师以某种方式说“我希望那个按钮也在另一个部分......嗯......小说......呃......”，该怎么办？

使用Mix：

.header__item,
.footer__item {
      font-size: 16px;
 }

使用修饰符：

.btn { 
    //button stuff
}

.btn--small {
    font-size: 16px;
}

虽然我正在写这篇文章，但似乎像font-size或color这样的东西是修饰符，像margin这样的东西是混合？

在这种情况下，间距（边距）问题：你是否已经在组件或BEM-Mix中添加了一些东西？让我们再说一个简单的按钮。我知道这一切都是可能的，但试图抓住一些利弊。

谢谢：）

Answer 1

1）您可以创建多个占位符以重置某些属性。例如%reset-list，%reset-button。并用它来扩展组件。 .button { @extent %reset-button; }。

2）修饰符或混合。我认为所有外部样式，如边距和定位都应该由父混合设置。但是所有内部属性（如颜色，字体大小等）都应该由修饰符设置。因为元素不了解外部环境。并且父块也不知道它的子（不是__element）是如何制作的。

在你的情况下：

<div class="header">
    <a class="header__item btn btn--small"></div>
</div>

.header__item {
    position: absolute; // for example
}

.btn--small {
    font-size: 16px;
}

BEM方法学：不同的问题（重置，混合或修饰）

1 个答案: