Oficio digital y buenas prácticas, consejos para diseñadores front-end

En el mundo del diseño gráfico existe un término utilizado en el área digital conocido como oficio digital. Concepto que los programadores también tienen muy en cuenta, la única diferencia es que para ellos lleva otro nombre, quizás más adecuado, y es el de "buenas prácticas". Al ser estudiante de diseño y nuevo en el de la programación he podido encontrar mas similitudes entre estas dos disciplinas de lo que esperaba. A continuación haré un breve listado de "buenas prácticas" o "oficio digital" correcto para aquellos diseñadores que se estén iniciando en el mundo de la programación, específicamente HTML & CSS.

1. Que sea legible

Al ser diseñadores es probable que tu código y estilos tengan que ser heredados por otra persona, como por ejemplo un programador Front-end, y es esencial facilitar su trabajo lo más posible. Al igual que en programas como Photoshop o Illustrator es fundamental para el orden el nombrar las capas correctamente, sucede lo mismo al escribir código. Ser claro en tu CSS puede ser realmente valioso a futuro tanto para la comprensión como para ayudar la búsqueda constante de elementos. Otro término que he encontrado muy útil en esta misma línea es el de ser específico. No es lo mismo decir "la ventana" a decir "la ventana redonda del segundo piso de la casa número 501". Al utilizar nombres más específicos se ahorra la confusión y entrelazado de estilos que sucede tanto al iniciar en programación.

2. Orden

En mi experiencia personal he visto que los programadores escriben su código de dos formas:

CASO A

.DivX { background: red; padding: 2em; border: 1px solid black; }

CASO B

.DivX {

  background: red;

  padding: 2em;

  border: 1px solid black;

}

Si son diseñadores como yo créanme les hará mucho más ameno el aprendizaje utilizando el segundo. Al no estar acostumbrados a este lenguaje, muchas veces abrumador para principiantes, separar todo y espaciar lo adecuadamente se convierte en una necesidad. Bajo este mismo principio recuerden siempre INDENTAR. Todo elemento contenido dentro de otro debe estar correctamente indentado, esto sin lugar a dudas les ayudará enormemente a comprender cómo se ordenan los elementos en el mundo informático.

3. Comentar si es necesario

El equivalente en código de usar "post-it". Una de las características que he encontrado más útil dentro de el mundo de la programación es la capacidad de poder comentar dentro del mismo código con completa libertad. Esto podrá parecer les trivial a los más experimentados, pero para los novatos poder explicar dentro de el mismo código cosas como "insertar lógica aquí por favor" es de mucha utilidad. Poder leer divisiones de sectores o explicaciones más claras de partes de código que son un real misterio para nosotros da una sensación de tranquilidad y mayor entendimiento general.

4. Usar margin: 0 auto

Puede parecer exagerado hacer un punto específicamente de una sola propiedad pero créanme que al tener el ojo deformado como lo tenemos los diseñadores el margin 0 auto se convierte en pan de cada día. Los diseñadores pasamos años ajustando el ojo para poder ser más críticos y poder establecer un mejor análisis visual de manera casi intuitiva. Al estar acostumbrados, y casi mimados, al uso de programas como Illustrator que facilitan la diagramación o layout de las piezas gráficas que diseñamos nos acostumbramos a posicionar todo de manera fácil y además perfecta. Si el comando de "alinear" en Illustrator fuera un botón en el mundo real mas de un diseñador lo tendría completamente gastado. Diagramar es radicalmente distinto en el universo HTML y CSS, y es lo primero que ocasiona frustración de manera casi inmediata. No poder diagramar, arrastrar ni ubicar los elementos de la forma que estamos acostumbrados, puede convertirse en una lucha constante con un código que en un principio nos es incomprensible y lejano. Al utilizar "margin: 0 auto" lo que estamos diciendo es que el elemento seleccionado debe tener un margen superior e inferior de 0 y sus márgenes laterales deben ajustarse automáticamente, al ser los dos iguales ubicará el elemento perfectamente en el centro. Esta propiedad me a salvado en muchas ocasiones en mi poco tiempo de programador y le estoy eternamente agradecido, como buen diseñador me gustan las distancias perfectas.

5. Utilizar varias hojas de estilo

Dependiendo de la complejidad del proyecto en el cual estés involucrado muchas veces es mejor y más fácil hacer hojas de estilo múltiples, aunque sean breves. Esto facilita en gran medida el trabajo de los diseñadores y ayuda también para un orden general más específico. Muchas veces un estilo en particular solo será utilizado en un lugar específico y no necesita repetirse en todos lados. Esto permite además ahorrar confusiones y que un elemento tome estilos que no estaban diseñados para el. Por ejemplo si estas programando una vista que tiene un conjunto único de estilos en vez de incluirlos en la hoja principal de estilos se puede crear un "específico.css" y que se aplique a esa vista en particular.

BONUS TRACK

¡Cierra esos elementos!

Cuando la consola te dice que estas teniendo un error o estas buscando a los famosos bugs te recomiendo revisar, primero que todo, que tus elementos están cerrados. No se cuantas veces aumente los niveles de estrés e ira para luego darme cuenta que me falto un <div>.

Espero que estos cinco puntos les puedan ser de utilidad a diseñadores en el futuro y puedan reducir el miedo, estrés y frustración que conlleva insertarse en este mundo oscuro y desconocido que es HTML & CSS.