跟蹤Jquery和CSS標識符的最佳方法是什么？

Question

這更多是關於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”還是類似的名稱？

如果不清楚，請告訴我，謝謝您的幫助。

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元素都是可單擊的。

其次，如果您確實有數百個標識符，請嘗試使用名稱空間來區分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最佳實踐
15種最佳CSS做法，讓您的生活更輕松
改進代碼的10種最佳CSS做法

上面提供的所有信息都是為​​了讓您了解CSS的使用。 從所有這些信息中，您可以制定出滿足您需求的最佳選擇。