CSS es un lenguaje que vemos o utilizamos tanto que muchas veces damos por sentado que lo manejamos a la perfección, esta creencia nos puede limitar a la hora de aprender algunas prácticas que serán útiles tanto para nosotros como para nuestro equipo de trabajo.

Por ello te comparto algunas buenas prácticas a la hora de escribir nuestro código CSS:

 

1- Hacerlo legible: 

 

  Por más que este primer consejo parezca bastante obvio, un error que solemos cometer al codear rápido y sin pensarlo mucho es creer que nuestro código se entiende y será entendible por todos, es importante tomarnos un tiempo para analizarlo e intentar que sea legible y comprensible por cualquiera (incluso uno mismo) que pueda ver nuestros archivos CSS en un futuro.

 

En este punto existen varios ejemplos de lo que no deberíamos hacer:

 

  - Escribir todo en una línea: 

   .una-clase { font-size: 10px; color: red; background-color: grey; text-align: center } 

 

  Esto es mucho más fácil de leer si lo escribimos de la siguiente manera: 

.una-clase {
font-size: 10px;
color: red; 
background-color: grey;
text-align: center;
}

 

También aplica al momento de combinar selectores, siempre es mejor una línea por selector. Por ejemplo: 

contenedor-uno, contenedor-dos, contenedor-tres {...}

 

No es tan legible como lo siguiente: 

.contenedor-uno, 
.contenedor-dos,
.contenedor-tres { 
////////
}

2- Mantenerlo simple:

Si varios elementos comparten el mismo estilo es conveniente crear una clase que sea reutilizable y que estos elementos compartan.

 

Entonces en vez de tener algo así: 

.un-div {
  	 background-color: grey;
  	 height: 200px;
}

.otro-div {
 background-color: grey;
             height: 200px;
}

 

Podríamos simplemente crear una clase que sea reutilizable, el nombre que le pongamos a nuestras clases es muy importante.

 

Un muy mal ejemplo de esto sería tener en nuestro codigo estas tres clases: 

.card {}

.MenuUsuario{}

.item_lista {}

 

Nuestro código debe de seguir una convención, por ejemplo podemos elegir kebab-case para nuestras clases.

 

Elegir un nombre muy específico o muy genérico también puede traernos problemas de reutilización y de mantenibilidad, así entonces debemos buscar un equilibrio entre ambos y que nuestras clases puedan indicar un scope determinado pero no tan específico como para que podamos reutilizarlas.

 

Con estos consejos entonces nuestra clase reutilizable quedaría así: 

.contenedor-fondo-gris { 
background-color: grey;
   	height: 200px;
}

 

y ahora podemos agregar contenedor-fondo-gris a cuantos contenedores sean necesarios.

 

Eso no es todo, existen otras maneras de simplificar nuestro código CSS. En vez de escribir algo así: 

.nuestro-div { 	
	margin-top: 10px
	margin-right: 5px;
	margin-bottom: 2px
margin-left: 8px;
}

 

Podemos simplificarlo de la siguiente manera: 

.nuestro-div { 	
	margin: 10px 5px 2px 8px;   
// En sentido horario => primero top luego right luego bottom y por último left.
}

 

Para una sola clase quizás pueda parecer un cambio irrelevante, pero cuando tratamos archivos extensos este tipos de cambios se reflejarán en varias líneas menos y por ende un CSS mucho más conciso.

 

Respetar la estructura del DOM: 

Se recomienda siempre ordenar nuestro código CSS respetando la estructura HTML, es decir en primer lugar los elementos universales que estilemos, luego estilos del header, nav y por último wrapper o bien respeteando el orden natural que tenga nuestra página. A medida que nuestro archivo CSS agrupa más y más secciones es conveniente y necesario que agreguemos comentarios a modo de guía para agrupar por partes las distintas properties.

 

Siempre que sea posible evitemos agregar selectores extras: 

Si bien agregar selectores incrementa la especificidad de nuestra regla, agregar más selectores de los necesarios hará nuestro código más difícil de entender y mantener, si en un futuro necesitamos pisar dicha regla entonces serán necesarios más y más selectores extras.

 

Utilizar clases para estilar y evitar el uso de ids: 

¿Por qué selectores de clase y no por id te preguntarás? Los selectores por id tienen prioridad sobre otros tipos de selectores. Esto puede dificultar la adición de nuevas reglas usando selectores menos específicos, en otras palabras estamos aumentando la probabilidad de que en un futuro existan conflictos de especificidad. 

Sumado a esto, utilizando selectores de clases facilitamos la reutilización.

 

Evitar el uso de !important: 

El uso del !important normalmente significa que estamos intentando pisar alguna propiedad que tiene más especificidad o que no queremos que otros puedan anular una propiedad.

Primer caso:

Si se trata de una regla provista por terceros, la cual no podemos simplemente modificar como sucede en muchos casos este sería un uso excepcional y justificado. Peeero en el caso de que sea una regla que si podemos modificar, debemos optar por agregar una regla con más especificidad sin la necesidad de usar el !important con el fin de aprovechar la mantenibilidad de nuestro código. 

 

Segundo caso: 

Para el caso en el que la intención sea evitar que otros pisen una o más propiedades de una regla deberíamos entonces preguntarnos por qué no deberían de poder cambiar el estilo de una aplicación, especialmente si están trabajando en el mismo proyecto?

También evitar estilar con el tag style: 

Como comenté anteriormente, la reutilización y mantenibilidad son dos grandes objetivos que tenemos que tener siempre presentes al escribir código, esto pasa en muchos lenguajes de programación y en el lenguaje de CSS no hay excepción. Cuando utilizamos el tag style para estilar estamos cometiendo tres errores:

 

1. Perdemos toda posibilidad de reutilizar ese código ya que se aplicará solo a ese elemento.
2. El tag style tiene especificidad más alta que cualquier estilado externo, por ende solo podríamos pisarlo utilizando !important
3. Por último, estamos mezclando lenguaje de marcado y de presentación.

 

Otros pequeños tips: 

Incluir un espacio entre el selector y la llave de apertura:

.Selector { } 

Algo puramente visual pero hoy ya forma parte de una convención al escribir CSS.

 

En el caso de los valores hexadecimales, escribirlos en minúscula y cuando sea posible podemos usar notación abreviada.:

#fff vs #ffffff  #3d3d3d vs #3D3D3D

 

Es una manera de resumir aún más nuestro código. Como también en el caso de los valores cero, no es necesario especificar las unidades: 

margin-right: 0; vs margin-right: 0px;

 

Conclusión

 En un breve artículo vimos como con pequeños cambios podemos lograr una enorme diferencia en la legibilidad, mantenibilidad y reutilización de nuestro código, te recomiendo adoptar estas prácticas como hábito y convención y ojo, aún hay más buenas prácticas que llegarán en la segunda edición. Estate atento ;)