Question

使用以下HTML结构，我如何最好地实现HTML，CSS和＆amp ;;之间的关注点分离。 JS？

<nav role="navigation" class="site-nav js-site-nav">
  <ul class="site-nav__list">
    <li class="site-nav__item"><a href="#" class="site-nav__link">Menu Item 1</a></li>
    <li class="site-nav__item"><a href="#" class="site-nav__link is-active">Menu Item 2</a></li>
  </ul>
</nav>

演示： http://codepen.io/achisholm/pen/wGVGxj

首先，这个例子似乎并没有真正去耦合。我发现类命名系统不适合分离。在尝试定位链接时，我仍然需要在JS中的某个地方使用.site-nav__link选择器。

在每个链接上使用JS钩子类似乎是向右移动方向。是否在每个链接上添加.js-site-nav__link类改进？

<nav role="navigation" class="site-nav">
  <ul class="site-nav__list">
    <li class="site-nav__item js-site-nav__item"><a href="#" class="site-nav__link">Menu Item 1</a></li>
    <li class="site-nav__item js-site-nav__item"><a href="#" class="site-nav__link is-active">Menu Item 2</a></li>
  </ul>
</nav>

这对我没有多大吸引力，因为虽然没有本质上与表现阶级联系在一起，但使用整个BEM名称仍然会使得很难进行任何结构性改变而且我没有看到仅仅使用{{1 }}

我可能会考虑像.site-nav__link这样的班级名称，但是推广会导致其他问题。定位js-link会给我最好的一切吗？

.js-site-nav .js-link

我觉得这真的是脱离耦合，但是它会变得如此好吗？

感谢@claudios提供了一个简单的例子，它有一个很好的JS钩子，<nav role="navigation" class="site-nav"> <ul class="site-nav__list"> <li class="site-nav__item js-link"><a href="#" class="site-nav__link">Menu Item 1</a></li> <li class="site-nav__item js-link"><a href="#" class="site-nav__link is-active">Menu Item 2</a></li> </ul> </nav>包含一个有帮助的动词。像这样的东西运作良好，但在我的例子中不合适。感觉js-add沿线的JS钩子可能开始变得结构良好。

来源：取自以下谈话的HTML（在17分钟跳转到相关部分）... https://vimeo.com/album/3953264/video/166790749#t=17m0s

Answer 1

我的理解是你想要一个很好的方法来解耦html，css和javascript。根据我的经验，我建议使用所有js的前缀。

例如：var fs = require("fs"); var Promise = require("promise"); var read = Promise.denodeify(fs.readFile); var p = read("C:\\Users\\aonal\\Desktop\\gelenhamveri.txt", "utf8") .then(function (contents) { console.log(contents) })

想象一下，如果你有一个像js-*这样的按钮，那么你想在其上放一个js然后可以将其重写为。

<button class="add">Add</button>

现在，如果此按钮更特殊，并且需要与具有类<button class="js-add add">Add</button>的所有按钮不同，那么您可以编写

add

希望这可能会有所帮助。

Answer 2

实际上BEM的想法是相反的。

根据了解自身一切的块（组件）来思考：标记（HTML），视图（CSS）和行为（JS）。

因此，BEM不应将这三者分开，而是应该将它们放在一起。

使用site-nav回到您的示例您可能已将所有JS委托给块本身并使用其元素进行操作，就像块的内部API一样（is-active应该成为{{{}的修饰符1}}）。

请查看bem.info上的文档以了解更多信息：https://en.bem.info/methodology/js/

Answer 3

在我看来，使用此类命名只会让事情变得复杂，而现在您可以使用SASS中的CSS和OOP JS编码轻松安排您的元素和事件。选择正确层次结构中的元素。

您必须尽可能简单地命名您的元素和事件。

让我详细说明：

让我们说我们想要实现一个像你给出的例子那样的结构：

<nav role="navigation" class="site-nav js-site-nav">
  <ul class="site-nav__list">
    <li class="site-nav__item"><a href="#" class="site-nav__link">Menu Item 1</a></li>
    <li class="site-nav__item"><a href="#" class="site-nav__link is-active">Menu Item 2</a></li>
  </ul>
</nav>

虽然在这个分层结构中命名你的元素真的很整洁，但是一段时间之后它会变得有点混乱，加上如果某个新人来到项目并看到命名，那么，让我们说它会带走它们一段时间记住所有名字（不要欺骗其他代码）。

如果我要实现这个结构，那就像是：

<强> HTML

<nav role="navigation" class="site-nav js">
  <ul>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#" class="active">Menu Item 2</a></li>
  </ul>
</nav>

<强> SCSS

.site-nav{
    //styling here

    &.js{
    //styling here
    }

    ul{
        //styling here

        li{
            //styling here

            a{
               //styling here
            }
        }
    }
}

现在让我说我想为以前称为a的{{1}}写一个事件：

<强> JS

a.site-nav__link

层次结构使您可以轻松找到元素，并且永远不会忘记这些元素的名称。

现在让我们来看看document.querySelector('.site-nav ul li a').addEventListener(eventName, function() {});以及我们为什么要使用它？

一般来说，你不需要为.js中使用的每个元素使用“js类”，那么我们为什么要使用它呢？让我用一个例子解释一下。

假设我们有一个名为js的按钮，其中包含一些样式。

<强> SCSS

.button

我们希望某些这些按钮（具有相同的样式）在单击后增大尺寸，因此我们向它们添加.button{ //Some styles }类以了解它们是否被操作.js并更轻松地处理它们。

js

在我们写的document.querySelector('.button.js').addEventListener('click', function() { this.className+=' clicked'; });中：

CSS

就这么简单！

另一方面，如果我们不想使用.button{ //Some styles &.js{ .clicked{ transform:scale(1.1); } } }类（也可以在其他元素上使用，因为我们从不单独使用它，它总是带有另一个类或id以及.js）我们必须为这些按钮编写另一个类，但是通过一个小的层次结构，我们编写更少的代码和保持井井有条我们也将永远不必欺骗其他脚本，因为元素和事件的名称是如此难以记住！

在HTML，CSS和＆amp ;;之间实现真正的关注点分离JS？

3 个答案: