Share
Cuando trabaje con preprocesadores de CSS como Sass, Less (o cualquier otro lenguaje de programación), estará aprovechando el poder de las variables. Sin embargo, si creas espontáneamente tus nombres de variables a medida que codificas, las probabilidades son que tu convención de nombres carecerá de cohesión. Debe pensar en organizar sus nombres de variables (y proyectos para esa materia) de manera modular. Esto traerá estructura y unidad a su proyecto en general, haciendo que sea más fácil de entender y navegar todo el asunto..
Digamos que necesita una variable para el color del texto en su proyecto. Podrias llamarlo $ texto-color, o deberias llamarlo $ color-texto? ¿Cómo te decides? Elegir uno al azar puede contribuir a una falta de estructura a medida que aumenta el número de variables en su proyecto. Como muestra la experiencia, a menudo olvidamos exactamente cómo nombramos las variables para proyectos particulares. Esto lleva a la confusión y a los métodos de búsqueda y reemplazo globales de nombres de variables que consumen mucho tiempo..
Lo que necesitamos es una regla para definir y seleccionar nuestros nombres de variables. Una excelente manera de mantener la modularidad en su proyecto es agrupar variables que comparten relaciones y puntos en común. Luego puede nombrarlos organizando palabras que describan su función de genérica a específica (de la misma manera que CSS funciona con especificidad) de izquierda a derecha.
Por ejemplo, si tengo cuatro variables para cuatro colores de borde diferentes, puedo nombrarlos todos comenzando con "borde" (ya que ese es el término genérico que todos comparten) y ser más específicos con una lectura de izquierda a derecha. Agrupar y nombrar las variables de esta manera hace que su código sea más fácil de leer, comprender y recordar.
Supongamos que estamos trabajando en SASS y queremos crear una serie de variables que definan la paleta de colores de nuestro proyecto. Si estamos trabajando con un tono de azul, podríamos crear algunas variables como esta:
$ azul; $ azul oscuro; $ medio-azul; $ azul oscuro; $ celeste; $ más azul claro;
Una mejor manera de nombrar estas variables sería comenzar con la palabra genérica que todas comparten en común: azul. Entonces podemos obtener más específicos de izquierda a derecha:
$ azul; $ azul oscuro $ azul-más oscuro; $ luz azul; $ blue-lightest;
Esto no solo ayuda a recordar, sino que también permitirá que un editor de texto (como Sublime Text, Coda, etc.) sugiera colores fácilmente. De esta manera, no tiene que memorizar exactamente cómo nombró sus variables. Más bien, puede comenzar de forma genérica y ser más específico ya que el editor de texto sugiere automáticamente nombres de variables. Todo lo que tienes que recordar es que quieres un color azul. Así que empiezas a escribir $ azul y puedes obtener una lista de todos los diferentes blues que has creado!
Imagine que estoy trabajando en un proyecto grande y agrupé todas mis variables que contienen valores de color prefijándolas con la palabra genérica que todas tienen en común: color.
// OK $ border-color; $ color de borde oscuro; $ light-color-border; $ resaltar; $ enlace; $ link-dark; $ texto; $ color-texto; $ link-color-light; $ lightest-text-color;
// Mejor $ color-border; $ color-border-dark; $ color-border-light; $ color-resaltado; $ enlace de color; $ color-link-dark; $ color-link-light; $ color-texto; $ color-text-light; $ color-text-lightest;
Entonces, digamos que necesitaba un color para un borde. Empiezo a escribir frontera: 1px solid $ colo y mi editor de texto puede sugerir todas las variables de color que he definido para mi proyecto.
Tal vez tenga muchos colores en mi proyecto pero solo quiero colores de borde. Podría predefinir algunas variables con los colores de borde deseados. Luego, al codificar, simplemente puedo continuar reduciendo la especificidad de mi nombre de variable borde: 1px solid $ color-border y mi editor de texto sugerirá automáticamente cualquier variable que tenga por ese prefijo. Todo lo que tengo que hacer es elegir el que quiero.!
Incluso si no tuvieras sugerencias de código, esta sería una forma efectiva de nombrar tus variables. Le ayuda a recordar fácilmente lo que ha nombrado variables porque las variables que comparten relaciones comparten prefijos.
Nombrar sus variables de esta manera modular le ayudará a entender su proyecto conceptualmente antes de codificar, mientras codifica y después de codificar. Es una situación de ganar-ganar-ganar!
Accentsconagua