¿Cuál es la mejor manera de realizar un seguimiento de sus identificadores para su Jquery y CSS?

Question

Esto es más de una pregunta de la organización sobre Jquery.

Utilizando el siguiente ejemplo sencillo:

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

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

Ahora multiplique esto por un 1000 en su sitio web, puede obtener rápidamente desordenado. También puede olvidar qué clases le asignó a Jquery o a su CSS. Normalmente trato de evitar mezclar ambos, así que agrego mis clases para CSS y otras para Jquery, en caso de que cambie el diseño o use esa sección en otro lugar, ... Puedo cambiar el CSS. ¿Pero cómo recordar cuál es para CSS o Jquery? ¿Nombra sus clases "JSclassName" o algo así?

Avísame si no estoy seguro y gracias por tu ayuda.

Answer 1

• tienen un esquema de nomenclatura coherente para sus "secciones" en términos de caso y que significa
• mantener los nombres de id y class la misma tanto para CSS y JS para evitar la confusión.
• En relación con el código semántico, también debe dar significado a los nombres de clase/id. Esto te ayuda a recordar para qué estás agregando el código. No use algo como "centeredContainer" o "thisIsClickable".

Ejemplo:

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

también mi espacio de nombres CSS y JS para evitar conflictos. El siguiente código asegura que el contenido del widget única meteorológicas son referenciados por el código:

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

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

También, aunque en realidad no los uso, ni hace uso de ellos, marcos menos y SASS también pueden ayudar en términos de evitar CSS redundantes código mediante el uso de variables.

Answer 2

Primero, proporcione a sus identificadores nombres más significativos. En mi opinión, click no es ideal. Se puede hacer clic en un botón, por lo que es un ancla, incluso un elemento div.

En segundo lugar, si tiene cientos de identificadores, intente utilizar namespace para distinguir los identificadores de CSS/JavaScript. Pero creo que esto no es necesario, usar el identificador CSS en tu JavaScript es natural, un nombre significativo está en la primera posición.

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

espacio de nombres es una buena manera de hacer que su código más limpio y más fácil de leer, te recomiendo que tengas un vistazo al código fuente de jQueryUI.

Answer 3

Aquí están mis sugerencias;

• Utilice siempre identificaciones únicas. Los ID deben ser únicos, dados a un elemento o selector específico solo mientras las clases pueden asignarse a múltiples selectores.
• No hay necesidad de utilizar una misma clase de JavaScript y CSS, tanto desde múltiples clases se pueden asignar a un selector como <div class="class1 class2">
• Utilice un archivo adjunto hoja de estilo para los elementos comunes aparecen en varias páginas con el fin de limitar estilos incrustados e integrados.

Los enlaces a continuación le sugerirán algunas pautas.

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

Toda la información proporcionada es para hacerle saber acerca del uso de CSS. De toda esta información, puede formular la mejor opción ideal para sus necesidades.