4

看过 BEM 命名约定。

我真的很想在这些方法中使用 bootstrap sass。

是否可以扩展引导程序以使用 BEM 样式类名称？

.block {}
.block__element {}
.block--modifier {}

例如，我将如何使用 BEM 命名典型的引导导航？

       <header className="container-fluid">
            <nav className="navbar navbar-default navbar-static-top">
                <div className="container">
                    <div className="navbar-header">
                        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                                aria-expanded="false" aria-controls="navbar">
                            <span className="sr-only">Toggle navigation</span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                        </button>

会涉及什么，我应该怎么做？

4

1 回答 1

2

是的，您绝对可以使用@extend和@include来做到这一点，如本文所示 - “ BEM、SASS 和 Bootstrap：如何以智能的方式混合所有内容？ ”

总体思路是，您可以将 Bootstrap 类的 CSS 属性应用到您自己的类中。例如，您自己的导航块（.my-navigation）可以获取 .navbar 的所有 CSS 样式：

.my-navigation {
    @extend .navbar;
 }

这样您就可以使用 class="my-navigation" 而不是 class="navbar"。

当然，为了能够做到这一点，您必须使用 Bootstrap 的 SASS 文件——而不是编译后的 CSS。这里有一些提示 - Bootstrap Sass 安装和定制。

需要指出的另一件重要事情是，仅仅因为您喜欢使用 BEM 而包含/扩展所有 Bootstrap 类可能不是最好的方法。您必须为自己和您正在从事的项目找出这个最佳点。以下是一些讨论此问题的链接：

为什么你应该避免使用 Sass @extend
sass 会损害性能吗？
前端理智的故事：当心 Sass @import

于 2016-10-31T07:31:47.620 回答