Como todos sabemos, la correcta utilización de CSS es fundamental para nuestros desarrollos web. Aunque aparentemente es fácil, el código se puede complicar en proyectos más grandes, que conlleven una gran cantidad de líneas. En este artículo vamos a dar unos consejos para que podamos mejorar en CSS, sin entrar en detalles técnicos, por lo que es recomendable tanto para los que ya tienen experiencia como para los que se están iniciando en este lenguaje.
Las preguntas más importantes que debemos hacernos los programadores, más que para resolver algún problema concreto, deberían estar destinadas a tener una idea más completa de algún lenguaje de programación, cómo mejorar nuestro código, cuáles son las mejores prácticas que debemos seguir… Por este motivo voy a dar algunos consejos, desde mi experiencia, para ayudar a aquellos desarrolladores que quieran mejorar la calidad de su código de CSS y a desarrollar de forma más óptima, o lo que es lo mismo, cómo ser buenos.
Comprende los conceptos
Esto es lo más importante.
Ya sabemos qué es background-color, cómo se utiliza flexbox, grid, cómo hacer animaciones… Esta no es la parte difícil, ya que siempre podemos buscar en Google y leer sobre cómo usarlos e implementarlos.
Pero lo que nos genera más dolores de cabeza es saber cómo se conectan todas estas propiedades entre sí, por qué se toman ciertas decisiones y se utilizan ciertos frameworks y nomenclaturas.
Es muy importante ser consciente de que la forma en la que comencemos nuestro proyecto definirá la estructura del mismo, por lo que debemos asegurarnos de conocer los problemas con los que nos podemos encontrar y cómo resolverlos.
Empecemos comprendiendo los fundamentos de CSS correctamente
Hay muchas propiedades de CSS, por lo que no es aconsejable memorizarlas todas. Para eso sirven guías como la del enlace anterior, cheatsheets y libros de consulta, para que los tengamos de referencia y podamos consultarlos en un momento dado. Ya no estamos en el colegio, nadie nos va a pedir (o no debería) que memoricemos una larga lista de propiedades para escribirlas en un papel.
Lógicamente, con el paso del tiempo, iremos memorizando las propiedades que más utilicemos. Cada vez tendremos que consultar menos las guías de referencia. Cuando no estemos seguro de cómo utilizar algo, o no recordemos el nombre de una propiedad, siempre podemos recurrir a ellas, o buscarlas en Google, probarlas y ver el resultado.
Todos sabemos que en un trabajo nos enfrentamos a fechas de entrega de proyectos, por lo que será necesario escribir eficazmente para cumplir tiempos. En este punto no será productivo estar consultando propiedades básicas. Por eso, hay que trabajar duro y formarnos antes de afrontar este tipo de situaciones.
Conocer la mayoría de las propiedades también mejorará nuestras habilidades de depuración. Saber cómo funciona cada propiedad nos ahorrará mucho tiempo de desarrollo.
Tenemos que escribir mucho código
Esto es como todo en la vida, hay que dedicarle mucho tiempo si queremos llegar a ser bueno en algo. Aquí es cuando nace otra de las preguntas que solemos hacernos en este punto: «Vale, pero ¿qué escribimos exactamente?»
Si ya trabajamos para una empresa o por nuestra cuenta, probablemente tengamos la respuesta a esa pregunta. Si no es el caso, te dejamos algunos consejos:
Cómo lo hacen los grandes
Tenemos que hacer lo siguiente: visitemos una web que admiremos (mucho mejor si tiene un tráfico de visitas alto), comencemos a inspeccionar los elementos (las DevTools serán nuestras amigas) y estudiemos cómo se han implementado.
Por ejemplo, la página de Airbnb.
Algunos consejos sobre qué buscar
- ¿Se ha usado algún framework o metodología específica? Empresas como Google, Medium, GitHub y Trello tienen sus propias pautas a la hora de escribir código. Podemos aprender mucho si estudiamos cómo programan otros profesionales.
- ¿Sobrescriben mucho código? Analicemos cuántas propiedades son sobrescritas por una clase específica. Cuantas menos, mejor (por eso es importante saber cómo lo hicieron).
- ¿Cómo han conseguido implementar algunas partes? A veces, algo tan sencillo como colocar un texto al lado de una imagen puede ser muy complicado si queremos que la imagen flote fuera del contenedor y se superponga con el elemento anterior y el texto se centre verticalmente, por poner un ejemplo. Son estos detalles en los que nos tenemos que fijar, y comprender cómo han obtenido partes que puedan parecer complejas.
- Observemos las diferencias entre su código y el nuestro. ¿Cómo posicionan los elementos? ¿Qué medidas utilizan (em, rem, porcentaje, píxeles…)? Es muy posible que lo que hagamos a diario se pueda hacer de una forma más simple.
Como imaginamos, tarde o temprano esto se volverá aburrido. No podemos dedicarnos solo a leer código, hay que hacer algo.
Intentemos hacer algo por nosotros mismos
Entremos en Dribbble y/o Behance. ¡Hay muchísimos diseños! Pensemos, ¿qué puedo hacer con ellos? Implementarlos. Elijamos uno fácil e intentemos que todo sea exactamente como en el diseño.
Podemos basarnos en diseños sencillos como este.
Eso sí, es importante que no lo utilicemos como si fuera nuestro propio diseño, eso no está bien. Debemos guardarlo en local, subirlo a nuestra web, GitHub y/o CodePen, pero siempre mencionando al autor del diseño y, si podemos, nos pondremos en contacto con él para que vea el resultado. ¡Seguro que le gusta saber que hay programadores que implementan sus diseños!
El siguiente paso es elegir un diseño más complejo para desarrollar: elementos superpuestos, sin cuadrículas, efectos, alineaciones ilógicas… ¿Por qué? Porque es difícil y nos pondrá a prueba. Nos hará pensar mucho más en cómo organizar el código (tenemos que recordar que debe ser entendible y bien estructurado para que sea mantenible). Y si incorporamos animaciones, mucho mejor.
Diseños como este, con la superposición de elementos, pueden resultar algo más complejos.
Si somos diseñadores, también podemos implementar nuestros propios diseños. Es una buena práctica que aumentará nuestras habilidades tanto para diseñar, como para programar.
Revisemos el código
Después de «para ser bueno hay que practicar y echarle horas», llega otra gran verdad que debemos aplicar también a muchos aspectos de la vida: «no es cuestión de cantidad, sino de calidad». Hay que revisar siempre el código y buscar cómo mejorarlo.
¿Por qué reescribimos eso? ¿Por qué usamos un id en lugar de una clase? ¿Era necesario añadir ese !important? ¿Podríamos haberlo hecho sin recurrir a tantos selectores? Son ejemplos de preguntas que deberíamos hacernos constantemente.
En Internet hay multitud de información sobre buenas prácticas para escribir CSS, aquí os dejo algunas:
- 8 reglas sencillas para una arquitectura de CSS robusta y escalable.
- Convenios de nomenclatura para CSS modular.
- Ideas para escribir CSS mantenible.
- Otra guía de buenas prácticas.
- 20 tips para escribir CSS moderno.
Planificar desde el principio
Antes de comenzar con un proyecto, debemos estudiar bien todas las posibilidades que tenemos, los elementos que va a contener, cómo funcionarán entre sí, cómo estarán anidados… Una correcta planificación nos ayudará a desarrollarlo más fácilmente, con menos errores y sin reescribir mucho código.
Aprendamos a planificar correctamente
Esto es crucial. Desde el primer momento, cuando estemos ante los mockups, prototipos o diseños, tenemos que planificar cómo va a ser la estructura al implementarlo.
¿Cuáles van a ser los elementos? ¿Se van a usar más de una vez? ¿En qué se diferencian? ¿Qué tienen en común? ¿Cumplen las mismas reglas?
Responder a este tipo de preguntas nos dará una idea sobre cómo realizar la estructura, cómo hacer modificaciones, reutilizar partes y que sea escalable.
La escalabilidad es un factor que no debemos olvidar. A medida que crecen los proyectos, nos daremos cuenta de la importancia de tener una buena base que nos haga más fácil añadir nuevas características o modificar las que ya están. Por eso, una buena planificación nos ayudará a ahorrar tiempo y dinero.
Otro factor importante es el mantenimiento, y más cuando trabajamos en equipo. Si no seguimos una estructura predefinida, con unas pautas claras sobre cómo debe ser el código, las tareas de mantenimiento pueden resultar muy difíciles.
Hay que pararse a pensar en el por qué antes de recurrir a soluciones rápidas como el abuso de !important.
Para resolver este tipo de situaciones, otros desarrolladores han creado los llamados convenios de nomenclatura (naming conventions). Son un conjunto de reglas que establecen cómo nombrar elementos, modificadores, cómo estructurar el código… Es decir, una metodología para escribir CSS.
Aunque hemos hecho una selección de varios, existen más. Conocer el alcance y las limitaciones de cada uno de ellos nos ayudará a elegir el que mejor se adapte a nuestro proyecto:
Si queremos elegir uno y no sabemos cuál, lo más recomendable es leer la documentación de cada uno.
Puede que no usemos ninguno, ni estemos interesados, pero es importante conocer la razón por la que existen.
Para finalizar
Estos son los consejos que he considerado útiles para todos aquellos que quieran mejorar su código CSS, en función de mi experiencia.
Aprender las bases, practicar mucho y estudiar cómo lo hacen otros profesionales.
Aunque pueden resultar obvios, hay veces que es bueno pararse a pensar en qué necesitamos hacer: si volver a repasar algunos conceptos básicos, practicar con algún diseño… Porque, como decía al principio, aunque puede parecer fácil, a medida que un proyecto va creciendo, puede volverse realmente complejo y difícil de mantener.
