.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上看到的大多数教程中,两个类都被添加到标记中.有人可以帮助我理解一种方式是否优于另一种方式？使用我的方法可能会导致任何问题吗？
解决方法
这不仅仅是关于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"/>
那么哪个修饰符会扩展按钮？如果两者都有,那么你会有两次相同的样式.另一位开发者如何知道？通过保持简单一致的方法,您的组件可以更清晰地阅读,理解和正确使用.
这些是为什么在示例中不经常使用扩展的几个原因.我认为最重要的一点是,你做的是确保一致的方法,所有开发人员都知道这一点.
