Question

这更像是关于Jquery的组织问题。

使用以下简单示例：

<a href="#" class="click">click me</a>

<script>
$(document).ready(function(){
    $('.click').on('click',function(){
          alert('Clicked!');
    });
});
</script>

现在在您的网站上将其乘以1000，它可能会很快变得混乱。您还可以忘记为Jquery或CSS归类的类。我通常尽量避免混合两者，所以我为Jquery添加我的CSS和其他类的类，以防我改变布局或在其他地方使用该部分，...我可以更改CSS。但是你怎么记得哪一个用于CSS或Jquery？你是否将你的类命名为“JSclassName”或类似的东西？

如果我不清楚并感谢您的帮助，请告诉我。

Answer 1

根据案例和含义为您的“部分”制定一致的命名方案
保持CSS和JS的id和类名相同，以避免混淆。
关于语义代码，你也应该给class / id名称赋予意义。这有助于您记住为其添加代码的内容。请勿使用“centeredContainer”或“thisIsClickable”之类的内容。

示例：

<section class="weatherWidget">
    <ul class="forecast">
        <li class="vicinity">
           ...
    <ul class="news">
        <li class="region">
           ...

我还命名我的CSS和JS来避免冲突。以下代码确保代码仅引用天气小部件内容：

//this click event is only for weatherWidget vicinity
$('.weatherWidget .vicinity').on('click',function{...});

//this CSS is only for weatherWidget regions
.weatherWidget .region{...}

此外，尽管我并不真正使用它们，也不赞同使用它们，但LESS和SASS框架也可以通过使用变量来避免冗余的CSS代码。

Answer 2

首先，为您的标识符提供更有意义的名称。在我看来，click并不理想。按钮是可点击的，锚点也是如此，即使是div元素也是如此。

其次，如果您确实有数百个标识符，请尝试使用 namespace 来区分CSS / JavaScript标识符。但我认为这没有必要，在JavaScript中使用CSS标识符是很自然的，有意义的名字在第一位。

<style>
    .ui-cart-button{ };
</style>
<a href="#" class="js-add-to-cart ui-cart-button">Buy</a>

命名空间是使代码更清晰，更易读的好方法，我建议你看一下jQueryUI的源代码。

Answer 3

以下是我的建议;

始终使用唯一ID。 ID应该是唯一的，只有在为多个选择器提供类时才能为特定元素或选择器提供。
不需要为JavaScript和CSS使用相同的类，因为可以将多个类分配给<div class="class1 class2">等选择器
使用样式表附件可以在多个页面中显示常用项目，以限制嵌入式和内联样式。

下面的链接会为您提供一些指导原则。

<强> 30 CSS Best Practices for Beginners
的 15 Best CSS Practices to Make Your Life Easier
的 10 Best CSS Practices to Improve Your Code

以上给出的所有信息都是为了让您了解使用CSS。从所有这些信息中，您可以制定出最适合您需求的选项。

跟踪Jquery和CSS标识符的最佳方法是什么？

3 个答案: