Qual è il modo migliore per tenere traccia degli identificatori per Jquery e CSS?

Question

Questa è più una questione di organizzazione riguardante Jquery.

Utilizzando il seguente semplice esempio:

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

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

Ora moltiplicare questo da un 1000 sul tuo sito web, si può rapidamente ottenere disordinato. Puoi anche dimenticare quali classi hai attribuito a Jquery o al tuo CSS. In genere cerco di evitare di mixare entrambi, quindi aggiungo le mie classi per CSS e altre per il Jquery, nel caso in cui cambi il layout o usi quella sezione da qualche altra parte, ... Posso cambiare il CSS. Ma come ti ricordi quale è per CSS o Jquery? Hai nominato le tue classi "JSclassName" o qualcosa del genere?

Fatemi sapere se non sono chiaro e grazie per il vostro aiuto.

Answer 1

• avere uno schema di denominazione coerente per le "sezioni" in termini di cassa e che significa
• memorizzare nomi id e di classe la stessa sia per i CSS e JS per evitare la confusione.
• In relazione al codice semantico, è necessario dare un significato anche ai nomi di classe/id. Questo ti aiuta a ricordare per cosa stai aggiungendo il codice. Non utilizzare qualcosa come "centeredContainer" o "thisIsClickable".

Esempio:

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

ho anche il mio spazio dei nomi CSS e JS per evitare conflitti. Il seguente codice assicura che solo climatiche contenuti di widget viene fatto riferimento dal codice:

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

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

Inoltre, anche se io in realtà non li uso e non condivido il loro utilizzo, i quadri di meno e SASS possono anche aiutare in termini di evitare ridondante CSS codice usando le variabili.

Answer 2

Innanzitutto, dai ai tuoi identificatori nomi più significativi. A mio parere, click non è ideale. Un pulsante è cliccabile, quindi è un ancoraggio, anche un elemento div.

In secondo luogo, se si dispone di centinaia di identificativi, provare a utilizzare lo spazio nomi per distinguere identificativi CSS/JavaScript. Ma penso che questo non sia necessario, l'uso dell'identificatore CSS nel tuo JavaScript è naturale, un nome significativo è nella prima posizione.

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

Namespace è un buon modo per rendere il vostro più pulito il codice e più leggibile, vi consiglio di dare un'occhiata al codice sorgente di jQueryUI.

Answer 3

Ecco i miei suggerimenti;

• Utilizzare sempre ID univoci. Gli ID devono essere unici, assegnati a un elemento o selettore specifico solo mentre le classi possono essere assegnate a più selettori.
• Non c'è bisogno di usare stessa classe per JavaScript e CSS, sia dal più classi possono essere assegnati a un selettore come <div class="class1 class2">
• Utilizzare un allegato foglio di stile per gli elementi comuni appaiono in più pagine in modo da limitare gli stili embedded e in linea.

link qui sotto vi suggerisce alcune linee guida per voi.

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

Tutte dato informazioni di cui sopra è quello di farvi conoscere usando i CSS. Da tutte queste informazioni, è possibile formulare l'opzione migliore ideale per le proprie esigenze.