La creación de un sitio o cualquier cosa que requiera de css tiene muchos pasos antes, que usualmente se obvian dentro de todos los artículos porque se asume que es sabido y practicado meticulosamente.
Primero al papel y de regreso
En lo personal, cuando tengo a cargo todo el proyecto me gusta primero hacer un pequeño boceto, muy rápido para poder darme una idea de lo que busco, posteriormente, entre las herramientas de diseño, usualmente varias resulta un dummy gráfico que está sujeto a cambios, sean del cliente o propios, no importa.
El paso final y el que en lo personal le doy más énfasis es el regreso al papel… Siempre que termino el dummy gráfico después de la aprobación del cliente inicia mi marcaje… Ahí visualizo características comunes dentro del diseño, sea que hay padding constante en este o aquel lugar donde debería ir esta o aquella etiqueta. En una impresión casi siempre a blanco y negro, tomo un lápiz e inicio a trazar y anotar lo que considero debe hacerse con el css.
Evitando la duplicación
En css es normal que se escriban y sobrescriban las reglas que vamos estableciendo, porque en mi experiencia, la mayoría de las veces se va improvisando en el momento de la creación, por las malas prácticas de trabajo.
Lo normal es que en muchos casos esto degenere en un css que va a tener muchas veces la misma orden, sean tamaños márgenes, bordes… En varios lugares, en el mejor de los casos duplicada porque la sobre escritura de una propiedad es recurrente.
La única solución para esto sería la planificación, concienzuda y constante de la logística. Pero la verdaderamente no importa que tan meticuloso seas siempre hay que revisar muchas veces para poder obtener un código limpio.
Mantenibilidad
Cuando pensamos en la creación de un sitio es recomendable pensar en el futuro, después de que el proyecto se termine, si es que se puede decir que los proyectos se terminan, pero acá lo fundamental es pensar en las futuras ediciones (Tema que me interesa para este artículo) porque siempre hay que darle mantenimiento a las cosas pero qué pasa si todo lo tengo establecido con medidas fijas por ejemplo.
EJEMPLO DE BOTÓN 1
See the Pen Ejemplo de botón 1 by Ka’ de Xaeoc (@xaeoc) on CodePen.
See the Pen Ejemplo de botón 3 by Ka’ de Xaeoc (@xaeoc) on CodePen.
Usemos por ejemplo este botón, quiero cambiarle el tamaño de la tipografía, si sólo le cambio ese tamaño se va a deformar mi botón… Eso quiere decir que para generar un botón coherente con el anterior tengo que cambiar diez cifras (padding, border, border-radius, box-shadow, text-shadow, font-size y line-height).
Claro está y es indiscutible que las cifras exactas son mucho más sencillas de manejar pero lo que es cierto también es que estas cifras dificultan la edición posterior. Ahora que pasa si yo cambio la manera de plantear este ejercicio:
EJEMPLO BOTÓN 2
See the Pen Ejemplo de botón 2 by Ka’ de Xaeoc (@xaeoc) on CodePen.
Si observamos un poco el ejemplo todas las diez cifras que antes teníamos que cambiar para poder actualizar el botón las encontramos con la medida “em”.
EM es una de las medidas que se pueden usar en css, está relacionada con el tamaño del padre del elemento al que le queremos dar tamaño por ejemplo:
body {
font-size:16px;
}
h1 {
font-size:2em;
}
En este caso el body es el padre del h1, así que le h1 tiene el doble de tamaño de la tipografía que su padre 32px.
Lo maravilloso de este método es que si quieres editar el tamaño de la tipografía se puede editar el botón completo.
Ahora, sí queremos hacerlo más funcional podríamos pensar en modificar la manera en que el color se establece:
EJEMPLO BOTÓN 3
See the Pen Ejemplo de botón 3 by Ka’ de Xaeoc (@xaeoc) on CodePen.
See the Pen Ejemplo de botón 2 by Ka’ de Xaeoc (@xaeoc) on CodePen.
Varias cosas cambian, ahora tenemos dos clases y la declaración del color del botón…
Empecemos por la denominación del color. El cambio se da en cuatro lugares, border, box-shadow, text-shadow y background (último porque nos une con las clases que tenemos después).
En las tres primeras propiedades de css lo que se hizo fue establecer en el RGBA (Rojo, verde, azul y alfa) para adaptar con la transparencia establecida con el alfa el diseño a cualquier color.
Lo mismo sucede con el background pero se utilizó una manera diferente de denominación de color, HSLA (Hue, saturación, luminosidad y alfa) que es un poco menos utilizada por desconocimiento, generalmente, porque estamos más acostumbrados a usar el HEX y el RGBA.
Hay grandes explicaciones, en internet, de cómo funciona el modelo HSL, pero vamos a simplificarlo:
El hue es la rueda cromática que si bien habría que verlo de una manera diferente por hacernos fácil la vida nos vamos a imaginar que es una rueda…
Los grados de 0° a 360° establecen qué color vamos a escoger.
Luego sigue la luminosidad, entre más baja la luz más cerca del negro se encuentra… Obscuridad.
Tercero es la saturación que entre más baja más cerca del blanco nos encontramos… Eso sí, si no hay luz no puede verse nada (Negro).
Al último está el alfa que es la que da la transparencia…
Ahora bien, en el ejemplo la idea es que cuando veas: “linear-gradient(hsla(0,0%,100%,.2), transparent)” se establezca que va a existir un degradado de blanco (apenas perceptible) a transparente, para darle volumen. Aquí entran las clases, en vez de tener que darle un degradado de dos colores a cada una de las clases, se establece el degradado en transparente y el fondo del botón con el color particular de cada uno…
De nuevo EJEMPLO BOTÓN 3
See the Pen Ejemplo de botón 3 by Ka’ de Xaeoc (@xaeoc) on CodePen.
See the Pen Ejemplo de botón 3 by Ka’ de Xaeoc (@xaeoc) on CodePen.
En resumen se podría decir que si se planifica de manera adecuada y siendo meticuloso se puede reducir la cantidad de duplicaciones antes del momento de escribir el css pero siempre se necesitará pensar en la mantenibilidad del código para la vida después de terminado el proyecto.
Y usando los “em” podemos facilitarnos la vida…
Referencias.
Verou, L., (2015), CSS secrets, Canadá, O’Reilly Media INC.
