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

Question

This is more of an organisation question concerning Jquery.

Using the following simple example:

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

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

Now multiply this by a 1000 on your website, it can quickly get messy. You also can forget which classes you attributed for Jquery or for your CSS. I usually try to avoid mixing both, so I add my classes for CSS and others for the Jquery, in case I change I the layout or use that section somewhere else, ... I can change the CSS. But how to do you remember which one is for CSS or Jquery? Do you name your classes "JSclassName" or something like that?

Let me know if I'm not clear and thanks for your help.

Answer 1

• Have a consistent naming scheme for your "sections" in terms of case and meaning
• Keep id and class names the same both for CSS and JS to avoid the confusion.
• Relating to semantic code, you should give meaning to the class/id names as well. This helps you remember what you are adding code for. Don't use something like " centeredContainer " or " thisIsClickable ".

Example:

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

I also namespace my CSS and JS to avoid conflicts. The following code ensures that only weather widget contents are referenced by the code:

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

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

Also, although I don't really use them nor endorse using them, LESS and SASS frameworks can also help in terms of avoiding redundant CSS code by using variables.

Answer 2

First, give your identifiers more meaningful names. In my opinion, click is not a ideal one. A button is clickable, so is a anchor, even a div element.

Second, if you do have hundreds of identifiers, try to use namespace to distinguish CSS/JavaScript identifiers. But I think this is not necessary, using the CSS identifier in your JavaScript is natural, a meaningful name is in the first position.

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

Namespace is a good way to make your code cleaner and more readable, I recommend you to have a look at the source code of jQueryUI.

Answer 3

Here are my suggestions;

• Always use unique IDs. IDs should be unique, given to a specific element or selector only while classes can be given to multiple selectors.
• No need to use same class for JavaScript and CSS both since multiple classes can be assigned to a selector like <div class="class1 class2">
• Use a style-sheet attachment for common items appear in multiple pages so as to limit Embedded and Inline styles.

Links below will suggest some guidelines for you.

30 CSS Best Practices for Beginners
15 Best CSS Practices to Make Your Life Easier
10 Best CSS Practices to Improve Your Code

All the above given information is to let you know about using CSS. From all these info, you may formulate the best option ideal for your needs.