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

これが私の提案です。

  • 常に一意の ID を使用してください。ID は一意である必要があり、特定の要素またはセレクターにのみ付与されますが、クラスは複数のセレクターに付与できます。
  • 複数のクラスをセレクターに割り当てることができるため、JavaScript と CSS の両方に同じクラスを使用する必要はありません。<div class="class1 class2">
  • 埋め込みスタイルとインライン スタイルを制限するために、共通のアイテムが複数のページに表示される場合は、スタイル シートの添付ファイルを使用します。

以下のリンクは、いくつかのガイドラインを提案します。

初心者のための 30 の CSS ベスト プラクティス
作業を楽にする 15 のベスト CSS プラクティス
コードを改善するための 10 のベスト CSS プラクティス

上記のすべての情報は、CSS の使用について知らせるためのものです。これらすべての情報から、ニーズに最適な最適なオプションを策定できます。

于 2012-08-09T07:42:17.717 に答える
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 に答える