Geek asks and answers

What is the best way to keep track of your ids for jQuery and CSS?

This is more of an organization issue regarding 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 1000 on your site, it can get confused quickly. You can also 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 jQuery, in case I change the layout or use this section somewhere else ... I can change CSS. But how do you remember which one is for CSS or jQuery? Do you call your classes "JSclassName" or something like that?

Let me know if I do not understand and thanks for your help.

+5
source share
3 answers
  • "" .
  • id CSS, JS, .
  • 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 .

+4

. , click . , , div.

-, , , CSS/JavaScript. , , CSS JavaScript , .

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

- , jQueryUI.

+1

;

  • . , , .
  • JavaScript CSS , <div class="class1 class2">
  • , .

.

30
15 CSS,
10 CSS

, CSS. , .

+1

More articles:


All Articles