css – 使用Sass @extend修改BEM类

有了BEM的美国医学,说我有两个这样的课：

.staff__teacher

和.staff__teacher – 教授

在教授的标记中,想法是同时拥有两个类还是仅修改类？

< div class ='staff _teacher staff__teacher - professor'>< / div>

要么

< div class ='staff__teacher - professor'>< / div>

从我的观点来看,后者更有意义,因为它更简化,更容易阅读.

在Sass中,只需扩展.staff__teacher类即可创建该类

.staff__teacher--professor{
    @extends .staff__teacher;
    //...extra professor styles here..
}

但是,在我在BEM上看到的大多数教程中,两个类都被添加到标记中.有人可以帮助我理解一种方式是否优于另一种方式？使用我的方法可能会导致任何问题吗？

首先,这是一个基于意见的答案.没有什么可以阻止你使用@extends而不是基类.以下是可以使用两个类的一些原因.

这不仅仅是关于SASS

首先,并非每个人都使用SASS.甚至LESS直到最近才延长.方法不应仅限于特定的预处理器或根本不限于预处理器.简单的旧CSS就是我们在这里看到的.但是可以做这样的事情：

CSS

.button,.button--red,.button--green {
    // base styles
}

就个人而言,一旦我写完它,我宁愿单独留下基本风格.在按钮的情况下,我可能会有很多修饰符.对我来说,这有点混乱,因为在元素上放两个类可以让我的CSS更干净,更简洁.

2.描述性的

BEM的一部分是类现在更具描述性,您可以查看样式表并更好地理解模块/组件及其中包含的内容.对我来说,基类也是如此.当我查看我的标记时,它为我提供了更多信息.

<input type="submit class="button button--green"/>

我可以看到它是一个绿色按钮,它来自按钮,我知道我可以轻松地改变它,并且可能还有其他选项供我使用.所有这些都没有看样式表.

3.灵活性和一致性

不要以为你只会有一个基类和一个修饰符.你可以很容易地拥有很多.例如,我可以有按钮,按钮 – 大按钮 – 绿色.

<input type="submit class="button button--large button--green"/>

那么哪个修饰符会扩展按钮？如果两者都有,那么你会有两次相同的样式.另一位开发者如何知道？通过保持简单一致的方法,您的组件可以更清晰地阅读,理解和正确使用.

这些是为什么在示例中不经常使用扩展的几个原因.我认为最重要的一点是,你做的是确保一致的方法,所有开发人员都知道这一点.

相关文章