5

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

使用以下简单示例：

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

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

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

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

4

3 回答 3

4
  • 在大小写和含义方面为您的“部分”提供一致的命名方案
  • 保持 CSS 和 JS 的 id 和类名相同以避免混淆。
  • 关于语义代码，您也应该为类/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 代码。

于 2012-08-09T07:02:01.590 回答
1

首先，给你的标识符起更有意义的名字。在我看来，click不是一个理想的。按钮是可点击的，锚点也是可点击的，甚至是div元素也是如此。

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

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

命名空间是让你的代码更干净、更易读的好方法，我建议你看看 jQueryUI 的源代码。

于 2012-08-09T07:04:00.480 回答
1

这是我的建议；

  • 始终使用唯一 ID。ID 应该是唯一的，只给特定的元素或选择器，而类可以给多个选择器。
  • 无需为 JavaScript 和 CSS 使用相同的类，因为可以将多个类分配给一个选择器，例如<div class="class1 class2">
  • 对出现在多个页面中的常见项目使用样式表附件，以限制嵌入式和内联样式。

下面的链接将为您提供一些指导。

给初学者的 30 个 CSS 最佳实践
15 个让你的生活更轻松的
最佳 CSS 实践 10 个改进你的代码的最佳 CSS 实践

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

于 2012-08-09T07:42:17.717 回答