Javascript 实现HTML、CSS和；JS？

使用以下HTML结构，如何最好地实现HTML、CSS和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>

这对我没有太大的吸引力，因为尽管它与presentational类没有本质上的联系，但使用整个BEM名称仍然很难进行任何结构更改，而且我认为仅仅使用

.site-nav\uu link

并没有什么好处

<>我可能会考虑一个类名，比如“代码> JS链接”，但是泛化会导致其他问题。目标

.js站点nav.js link

会给我最好的一切吗

<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>

我觉得这是真正的去耦合，但它是否会像它将得到的那样好

感谢@claudios提供了一个简单的示例，其中有一个很好的JS钩子，

JS add

，其中包含一个动词，可以帮助您。像这样的方法很有效，但在我的示例中并不合适。感觉沿着

JS-toggle-link

的JS-hook可能开始得到结构良好的东西

来源：HTML摘自下面的演讲（17分钟后跳到相关部分）。。。

---

据我所知，您需要一种将html、css和javascript解耦的好方法。根据我的经验，我建议对所有js使用前缀

例如：

js-*

想象一下，如果你有一个按钮，比如

Add

，然后你想在上面放一个js，那么它可以重写为

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

---

希望这能有所帮助。

据我所知，您需要一种将html、css和javascript解耦的好方法。根据我的经验，我建议对所有js使用前缀

例如：

js-*

想象一下，如果你有一个按钮，比如

Add

，然后你想在上面放一个js，那么它可以重写为

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

---

希望这能有所帮助。

在我看来，使用这样的命名只会使事情变得复杂，而现在，您可以使用

CSS

中的

SASS

和

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>

现在让我们假设我想为以前称为

a.site-nav\u链接的
a
编写一个事件：

JS

.site-nav{
    //styling here

    &.js{
    //styling here
    }

    ul{
        //styling here

        li{
            //styling here

            a{
               //styling here
            }
        }
    }
}

document.querySelector('.site-nav ul li a').addEventListener(eventName, function() {});

.button{
    //Some styles
}

层次结构使您尽可能容易地找到元素，并且您永远不会忘记这些类型元素的名称

现在让我们看一下<代码> js<代码>，为什么要使用它？
一般来说，对于将在
js
中使用的每个元素，您不需要使用“js类”，那么我们为什么要使用它呢？让我用一个例子来解释这一点

假设我们有一个名为
.button
的按钮，带有一些样式

SCSS

.site-nav{
    //styling here

    &.js{
    //styling here
    }

    ul{
        //styling here

        li{
            //styling here

            a{
               //styling here
            }
        }
    }
}

document.querySelector('.site-nav ul li a').addEventListener(eventName, function() {});

.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);
        }
    }
}

就这么简单

另一方面，如果我们不想使用
.js
类（也可以在其他元素上使用，因为我们从不单独使用它，它总是附带另一个类或id以及
.active
），我们必须为这些按钮编写另一个类，但是有了一个小小的层次结构，我们编写的代码就更少了，并且使事情井然有序，而且我们永远不必从其他脚本中作弊，因为元素和事件的名称非常难以记住
 在我看来，使用这样的命名只会使事情变得复杂，而现在，您可以使用
CSS
中的
SASS
和
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>

现在让我们假设我想为以前称为
a.site-nav\u链接的
a
编写一个事件：

JS

.site-nav{
    //styling here

    &.js{
    //styling here
    }

    ul{
        //styling here

        li{
            //styling here

            a{
               //styling here
            }
        }
    }
}

document.querySelector('.site-nav ul li a').addEventListener(eventName, function() {});

.button{
    //Some styles
}

层次结构使您尽可能容易地找到元素，并且您永远不会忘记这些类型元素的名称

现在让我们看一下<代码> js<代码>，为什么要使用它？
一般来说，对于将在
js
中使用的每个元素，您不需要使用“js类”，那么我们为什么要使用它呢？让我用一个例子来解释这一点

假设我们有一个名为
.button
的按钮，带有一些样式

SCSS

.site-nav{
    //styling here

    &.js{
    //styling here
    }

    ul{
        //styling here

        li{
            //styling here

            a{
               //styling here
            }
        }
    }
}

document.querySelector('.site-nav ul li a').addEventListener(eventName, function() {});

.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);
        }
    }
}

就这么简单

另一方面，如果我们不想使用
.js
类（也可以在其他元素上使用，因为我们从不单独使用它，它总是附带另一个类或id以及
.active
），我们必须为这些按钮编写另一个类，但是有了一个小小的层次结构，我们编写的代码就更少了，并且使事情井然有序，而且我们永远不必从其他脚本中作弊，因为元素和事件的名称非常难以记住
 实际上，边界元法是一种相反的观点

从块（组件）的角度考虑，这些块（组件）了解自身的一切：标记（HTML）、视图（CSS）和行为（JS）

相反