Css: 5 prácticas que debes evitar como desarrollador web

Para un desarrollador web novato, cometer errores está a la orden del día. Tener un conocimiento profundo de las tecnologías utilizadas es importante para obtener resultados importantes y adentrarse gradualmente al mundo laboral. El lenguaje CSS es una parte integral de estas tecnologías, ya que es fundamental para un desarrollador web.

¿Qué es CSS?

El lenguaje CSS, acrónimo de Cascading Style Sheets, se utiliza para estilizar elementos escritos en un lenguaje de marcas como el lenguaje HTML. Separar el contenido de la representación visual del sitio. Los archivos CSS no son estrictamente necesarios, pero tener un sitio solo en lenguaje HTML es sinónimo de páginas web totalmente carentes de dinamismo y estilo.

Aprender a programar en lenguaje CSS significa tener cuidado con lo que escribes, cómo lo escribes y sobre todo evitar cometer errores que un desarrollador novato es propenso a cometer. Al principio puede parecer complicado aprender el lenguaje CSS, pero todo lo que necesitas es un poco de buena voluntad y práctica.

En primer lugar, para mejorar y profundizar tus conocimientos de CSS, es bueno definir las 5 prácticas que debes evitar como desarrollador web:

1. Establecer los márgenes o el relleno de un elemento y luego restablecerlos: 

A menudo, puede parecer correcto establecer los márgenes o el padding css para todos los elementos y luego restablecerlos para el primer o último bloque de la página. En realidad no es una práctica correcta, además de costosa, porque se utilizan dos reglas en lugar de una sola. Es mucho más fácil establecer márgenes y relleno para todos los elementos necesarios a la vez. En lugar de escribir código como este:

1. .item {
3.   margin-right: 1.6rem;
4. }
5.  
6. .item:last-child {
7.   margin-right: 0;
8.}

Se puede escribir de manera más concisa así:

1. .item:not(:last-child) {
2.   margin-right: 1.6rem;
4. }

2. Nombrar selectores CSS demasiados descriptivos:

Un error muy frecuente en la programación informática de forma más general es el de asignar nombres a variables, métodos o (en este caso) elementos, demasiado discursivos. En programación informática siempre es importante ser resumido y conciso, siempre dando sentido a lo que se escribe. En el caso del lenguaje CSS, si queremos dar un nombre a una tarjeta, escribir '.brown-with-border-card' sería incorrecto, cuando bastaría con usar simplemente el nombre 'card'.

3. Abuso del uso de la regla !important

La regla !important se utiliza para anular las reglas de especificidad. Su uso se centra principalmente en anular un estilo que no se puede anular de ninguna otra manera. La mayoría de las veces se usa en escenarios en los que un selector más específico habría hecho el trabajo. El uso excesivo de esta regla dentro de un archivo CSS podría hacer que la lectura del documento sea confusa. Esta es una regla situacional que no debe usarse para distorsionar el flujo de reglas de especificidad.

4. Usar la misma regla una y otra vez

Muchos programadores web novatos utilizan reglas repetitivas para cada elemento definido en el archivo CSS. Para optimizar esta práctica redundante, se puede utilizar un atributo de clase. En lugar de escribir así:

 1. #intro1 {
 2.   color: #3498db;
 3.   font-size: 10px;
 4.   font-weight: bold;
 5. }
 6.  
 7. header {
 8.   color: #3498db;
 9.   font-size: 20px;
10.   background-color: green;
11. }
12.  
13. #banner {
14.   color: #3498db;
15.   font-size: 30px;
16.   background-image: url(images/static.jpg);
17. }

Se puede solucionar definiendo el color como atributo de clase:

1. .blue {
2.   color: #3498db;
3. }

5. No usar unidades relativas

Un error común que se debe cometer para aprender a programar con el lenguaje CSS es codificar las unidades en píxeles en lugar de usar solo unidades relativas (en porcentaje % o con la notación em). Las unidades relativas aseguran la escala del diseño en función de la pantalla del usuario. Es importante usarlos en todos los elementos que se gestionan y modifican en un documento CSS. Garantizar la escala del diseño dentro de una página web es fundamental para que la estructura de la página responda.

Tener cuidado de evitar estos errores mediante el uso del lenguaje CSS es la mejor manera de aumentar su familiaridad con el desarrollo web. Aprender a programar también implica cometer ciertos errores, pero reconocerlos es el primer paso para convertirse en un mejor programador. La figura del desarrollador web se crea de forma paulatina, a partir de dominar el uso de CSS, HTML y JavaScript. ¿Te estás preguntando cómo? No podría ser más fácil: comienza leyendo nuestra guía online de html y css, completamente gratuita y, si te das cuenta de que es lo que está buscando, considera el hacer un curso de desarrollador web como Hackademy de Aulab. ¡Corre a descubrirlo!