Mejora tu Estilización CSS y evita Desastres

publicado en: Uncategorized | 0

Todos los que programamos en cualquier lenguaje sabemos que los desastres están a la orden del día, esto es debido en gran parte a la mala escritura u errores al momento de asignar un nombre o elaborar una rutina, para evitar estos desastres y elaborar una hoja de estilos mas acorde a las necesidades del ahora y el mañana te mostraremos algunas reglas que si las sigues podrás tener un código óptimo para ser reutilizado muchas veces y así ahorrar tiempo y mejorar tu diseño en el área de estilos CSS.

El nombre de una clase de un elemento HTML puede tener mucho sentido hoy, pero si el diseño cambia una semana después, ese nombre de clase puede no encajar en la nueva estructura. También pasa lo mismo cuando una característica es añadida ó removida en una aplicación debido a que el cliente así lo decidió. Como resultado de estos cambios tenemos que hacer una  reestructuración (refactoring) de nuestro código para que ahora pueda tener sentido. Este ciclo se repite constantemente a lo largo de cualquier proyecto, por lo cual tenemos que tener mucho cuidado cuando nombramos los elementos.

 

No existe una técnica única para nombrar elementos correctamente, pero existen ciertas guías que pueden ayudarnos. En este artículo quiero enfocarme en cómo nombrar los elementos en CSS.para evitar encontrarnos con hojas de estilo similares a la siguiente

#caja interna { … }

.objeto1 .contenido { … }

Donde nadie sabe que es caja y objeto1 , esta forma de colocar los nombres en nuestras paginas es muy común en la actualidad.

Por lo tanto en el momento en el que estemos bloqueados y no sabemos que nombre de clase ponerle a un elemento HTML, usa las siguientes sugerencias, las cuales te ayudaran a mejorar tu estructura CSS.

Nombres de clase funcional.

Un buen método es crear los nombres de las clases basado en la función que elabora así los nombres podrán ser botón_almacenar  o lista_actual dicho de otra manera al ver el nombre de una clase CSS podemos fácilmente saber que hacer y así no perder tiempo en ver su código para analizar que hace así una hoja podría verse y comprenderse mejor con nombres tales como :

.menu { … }

.elementos_menu { … }

.seleccion_actual { … }

Nombre basados en el contenido.

Otra de las formas es asignar el nombre de la clase es basándonos en el contenido o sea Este tipo de nombres describen el contenido de los elementos tal como : contenido_interno o texto_en_tabla con ello sabremos por ejemplo que un texto dentro de una tabla llevara esos estilo en particular algunos ejemplos serian.

.tabla_principal { … }

.titulo_en_tabla { … }

.contenido_texto { … }

Nombres Complejos bien claros.

Cuando un elemento CSS requiere tener un estilo que dependa de un contenedor padre, es necesario que ambos nombres reflejen claramente la utilidad de un estilo, esto permitirá que tus hojas sean reutilizables en varios lugares y no solo en la página actual un ejemplo seria tener un estilo

#menu_vertical  .opciones

#menu_vertical .opcion_seleccionada

Este método nos permitirá por ejemplo conocer que la clase opciones depende(hijo) del elemento llamado menú_vertical(padre).

Creación de Reglas en Cascada.

El poder mas grande de CSS consiste en el concepto mismo de cascada, para poder hacer uso de dicho concepto deberemos analizar los estilos que se aplicaran a un elemento y aplicar asi el estilo en forma de cascada(padre-hijo) para aprovechar el potencial de la hoja y asi evitar estilizar cada elemento individualmente. Por ejemplo, en un menú tendríamos las clases arregladas de manera que se apliquen en forma tal que el código funcione mejor.

.menu {  colocamos las reglas que aplican a todas las opciones en general }

.menu .opción_uno { colocamos lo que aplica únicamente a la opción uno del menú }

.menu .opcion_actual { colocamos lo que aplica a la opción actual únicamente  }

Dicho en otras palabras se estiliza primero el objeto padre y todas sus carcteristicas y luego los objetos hijo y al final los objetos con características especiales de tal manera que los estilos se van agregando a medida el código avanza.

Hojas Generales.

La elaboración del estilo deberá ser pensada de manera que pueda cumplir con las siguientes reglas para que dicho estilo no implique crear una hora diferentes en cada pagina WEB.

Predecible: Tus reglas CSS deben comportarse como su nombre lo indica. Cuando cambias ó actualizas un estilo solo debe afectar la parte que estas trabajando, no debería de afectar otra partes adicionales Ejemplo: menu_vertical , boton_grande, texto:centrado.

Reusable: Tus estilos deberían de ser lo suficientemente abstractos y estar lo menos atados posibles a un elemento en específico, para permitirte construir nuevos estilos a partir de ellos, sin tener que reescribir el mismo estilo de nuevo. Ejemplo: sombra_grande , cuadro_redondeado.

Estas dos clases se puede usar en un mismo elemento para darle sombras y crear bordes redondeados y así crear un nuevo estilo combinado.

Mantenible: Cuando el diseño web cambia y hay nuevos elementos en escena, tu código CSS no debería de sufrir un cambio drástico, como al crear un nuevo elemento “Y” no debería de afectar al elemento “X” antiguo.

Ejemplo: Si tienes una barra a la izquierda y el nuevo diseño dice que ahora son 2 barras al mismo tiempo en ambos lados. Con solo crear una clase nueva llamada “sidebar_rigth” deberías de solucionar el problema

De esta manera la clase “sidebar” aplica el estilo general y las otras solo cambian la posición.

Escalable: Esto significa que tu código CSS debe de ser fácilmente editable por una persona o por un equipo, que no tiene una curva de aprendizaje alta  y es facilisimo de entender. Solo por que tu eres el único programador hoy actualizando este código no quiere decir que siempre sera así, por lo que si sigues estas pequeñas normas podrás tener una hoja de estilo que te servirá muchas veces sin necesidad de crear nuevas a cada momento.

Todas estas buenas practicas te servirán para crear en ti un habito al estar creando tus hojas y por supuesto te evitara que tu código CSS sera un verdadero dolor de cabeza.