Tener una buena relación con CSS

Escrito por Sarah Chima.

Artículo original en Inglés por Sarah Chima

"CSS apesta!", "¿Cómo puedo mejorar en CSS?"

"Me quedo atascadx en pequeños problemas de CSS durante mucho tiempo".

¿Alguna de estas expresiones describe tu experiencia con CSS? En caso afirmativo, sigue leyendo mientras comparto mis consejos personales sobre cómo mejorar tu relación con CSS. Prometo que será breve y no voy a aburrirlxs. Permítanme comenzar contándoles un poco sobre mi historia de amor con CSS.

Solía tener una relación horrible con CSS cuando comencé a programar. Siempre preferí trabajar en Javascript y hacer que mis aplicaciones funcionaran antes de diseñarlas. Me veía más como unx desarrolladorx de JavaScript que como unx Desarrolladorx Frontend debido a mi pobre relación con CSS. Eso ha cambiado ahora, ya no tengo esa visión de mí misma. Puedo afirmar que amo CSS (mucho, de verdad). Ahora, cuando trabajo en una aplicación, prefiero diseñarla antes de implementar cualquier lógica.

La moraleja de la historia: cualquiera puede ser excelente en CSS. Si consideras que CSS es un desafío en este momento, puedes mejorar si haces las cosas correctas.

Entonces, sin ningún orden en particular, aquí hay algunas cosas que puedes hacer para mejorar en CSS.

Aprende CSS
Deshazte de las bibliotecas
Aprende a encontrar errores en tu código (”debuggear”)
Lee el código de otras personas
Nombra tus clases de CSS apropiadamente
Practica

Analicemos brevemente cada uno de estos puntos.

Aprende y entiende CSS

La sintaxis de CSS es simple. Quiero decir, no tienes que escribir muchas líneas de código para que el color de fondo de un elemento sea verde. Debido a su simplicidad, muchas personas esperan que sea fácil usar CSS.

Sí, es fácil usar CSS si realmente conoces y comprendes las reglas que gobiernan en CSS y cómo se aplican los estilos. Es fácil si sabes qué propiedad de CSS se puede usar para hacer qué. Es fácil si comprendes la especificidad de CSS y qué podría ser la razón por la cual tus reglas de CSS no se apliquen a algunos elementos. Es fácil debuggear tus estilos si conoces CSS.

Dicho esto, para mejorar en CSS, es importante aprender CSS. Aprende los conceptos básicos de CSS como el CSS box model, relleno (padding), margen (margin), especificidad, posicionamiento, etc. Pasa a temas más avanzados como transiciones en CSS, animaciones, flexbox, grillas (grid), etc. Lee un libro sobre CSS, toma un curso de CSS, lee artículos sobre CSS regularmente, suscríbete a los boletines (newsletters) sobre CSS y haz más para aprender realmente CSS. Esto nos lleva a otra cosa que realmente puede ayudarte a mejorar en CSS.

Deshazte de las bibliotecas de CSS

Este consejo me lo dio un amigx y creo que es uno de los mejores que recibí. Me hizo retroceder y realmente aprendí CSS.

Así que abandona Bootstrap, Bulma y cualquier otra biblioteca que conozcas y usa vanilla CSS para tus proyectos. De acuerdo, no tienes que deshecharlas completamente. A veces, hacen que nuestro trabajo sea más rápido. Mi punto es que, antes de aprender a usarlas, es importante aprender CSS primero. Aprender cómo usar una biblioteca sin saber cómo funcionan bajo el capó es como aprender React sin comprender primero JavaScript. Puedes hacer que tu vida resulte miserable en algún momento.

Si deseas tener una mejor relación con CSS, es mejor intentar trabajar sin estas bibliotecas. De esta forma, entenderás cómo funciona CSS en profundidad.

Para obtener una mayor flexibilidad en el uso de estas bibliotecas, intenta estudiar su código, los estilos que aplican e intenta ajustar estos estilos. De esta manera, te serán más útiles.

Aprende a debuggear tu código

El Inspector en los navegadores es una bendición para los desarrolladores frontend. Aprende a usarlo. Aprender a debuggear tu código usando el inspector de tu navegador hará que debuggear sea más fácil y más rápido.

Cuando encuentres un error, ve a tu inspector y descubre qué regla de CSS se está aplicando. Puedes hacer mucho con el inspector de tu navegador. Puedes ver todas las reglas de CSS que se aplican y el orden en que se aplican, puedes editar el HTML, agregar estilos a cualquier elemento e incluso pseudoclases. En lugar de implementar tus correcciones en tu IDE (Entorno de desarrollo integrado) primero, pruébalo en el navegador, ve si funciona. Luego regresa y arréglalo en tu IDE. Esto te ahorra mucho tiempo.

Lee el código de otras personas

Sí, deberías hacerlo. Hay muchas cosas hermosas en Codepen, hay muchos sitios web hermosos en Awwwards. Mira sus hojas de estilo, intenta comprender qué hace que el sitio parezca hermoso. Si te encuentras con un diseño/layout con el que no has trabajado antes, inspecciona el elemento, descubre los estilos que se utilizan.

Esto puede no ser fácil al principio, especialmente si estás comenzando con CSS, pero créeme, se pone mejor. Intenta aprender al menos una cosa nueva de cada sitio que visitas al mirar su código. Con el tiempo, estas pequeñas cosas se suman y te hacen mejor en CSS.

A veces, cuando veo algo que no he hecho antes en un sitio web, creo un Codepen y trato de rehacerlo. Eventualmente, cuando necesito algo similar, visito este pen y estudio lo que hice. Esto me ha ayudado mucho.

Aprende a nombrar tus clases apropiadamente

Nombrar correctamente tus clases de CSS te ahorrará horas de depuración. Ayuda a evitar errores que pueden ocurrir cuando hay clases con nombres similares. Por ejemplo, nombrar una clase ‘title’ puede parecer correcto, pero es ese el único título que tendrá tu archivo CSS?. Sería mejor usar nombres más específicos como ‘post-title’ o 'card-title’.

Si tus nombres de clases no son específicos, podría ser difícil hacer un seguimiento de todos los nombres de clase de CSS que has utilizado. Eventualmente, puedes terminar teniendo estilos no deseados aplicados a un elemento debido al uso de un nombre de clase ya usado.

Siguiendo una convención de nombres como BEM, SMACSS u OOCSS hace que elegir nombres de clase sea más fácil. Incluso si no quieres seguirlas estrictamente, aprende los principios que las rigen, aplica estos principios y mantén un patrón. Hazlo por ti y por la persona que podría mantener tu código en el futuro.

¡Practica! ¡¡Practica!! ¡¡¡Practica!!!

Nada es mejor que practicar. Obtienes experiencia cuando trabajas en muchos diseños de Interfaz de Usuario (UI) con diferentes características y layouts. Te quedarás atascadx en varias cosas, especialmente cosas que no has hecho antes. Sin embargo, cuando le encuentres la vuelta, te tomará menos tiempo trabajar en cosas similares en el futuro.

Acepta siempre diseños de Interfaz de Usuario (UI) desafiantes y trabaja en ellos. De esa forma, mejorarás más rápido.

Últimas palabras

Si encuentra la solución a cualquier problema de CSS en StackOverflow o Codepen o en cualquier otro foro, descubre por qué funciona. Evite copiar y pegar estilos que no sean necesarios. Podrían ser el motivo de los errores que podrías tener más adelante.

No te sientas abrumadx por la cantidad de cosas que tienes que aprender. Nuevas funciones se agregan a CSS regularmente. Asegúrate de conocer los conceptos básicos primero, luego sigue aprendiendo y ampliando tus conocimientos.

Aquí hay un enlace a sitios web con contenido CSS útil.

En fin, eso es todo. Espero haber cumplido mi promesa de no aburrirte ;)

Siéntete libre de compartir consejos personales que te han ayudado a mejorarse en CSS y cualquier recurso CSS útil que tengas.

Gracias por leer. :)

Sarah is a Front-End Developer from Nigeria. She's a strong advocate of responsive and accessible websites and writes articles you can read on her blog.