Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo debes escribir una hoja de estilo CSS para que sea fácil de leer.

Un fichero CSS puede tener cientos de líneas. Según cómo lo escribas puede ser fácil de leer o muy difícil de leer. En este vídeo vamos a ver cómo utilizar los espacios en blanco, los comentarios y la agrupación de selectores para que un CSS sea más fácil de leer.

Con espacios en blanco me refiero a espacios en blanco, tabuladores y saltos de línea. Algunas personas prefieren escribir un CSS de forma compacta, cada regla en una sola línea que sólo se divide cuando es muy larga. Algunas personas prefieren escribir una propiedad por línea. Y en este caso hay personas que prefieren que las propiedades aparezcan con sangría, con dos espacios, cuatro espacios, o con tabulación.

También hay personas que prefieren dejar la llave de apertura en esta posición, detrás del selector, pero hay otras personas que prefieren que se sitúe en una línea nueva. Algunas personas prefieren alinearlo todo verticalmente, pero este estilo es difícil de mantener. Algunas personas prefieren una mezcla, pero también es un estilo difícil de mantener.

Otro mecanismo que facilita la lectura de un CSS son los comentarios, que empiezan con barra asterisco y terminan con asterisco barra. Los comentarios ayudan a definir partes en un CSS. Los comentarios también se pueden emplear para documentar el CSS y explicar ciertas cosas. Además, los comentarios también se pueden emplear para comentar partes del CSS que se quieren eliminar temporalmente para realizar pruebas.

La tercera cosa que se puede hacer para que un CSS sea más fácil de leer es utilizar la agrupación de selectores. Cuando varios elementos tienen el mismo estilo, se pueden agrupar, separados con comas, en una única regla. Esto no impide que en otro punto del CSS se puedan definir reglas individuales para cada uno de los elementos.

Por último, vamos a ver una herramienta que te puede ayudar a escribir un CSS que sea más fácil de leer. CSS Beautifier formatea el código CSS para que sea más fácil de leer. Ofrece opciones para definir la sangría, el número máximo de líneas en blanco que separan dos reglas o propiedades y si las llaves deben comenzar en una línea nueva o al lado del selector.

Por ejemplo, aquí tenemos este código CSS escrito en una sola línea. Cambiando los valores de esta herramienta, podemos lograr que el código se visualice de esta forma. Interesante, ¿verdad?

Ahora te invito a que veas el vídeo CSS: ordenar un CSS, en el que se explican varias formas de ordenar las reglas en un CSS para que sea más fácil de leer y mantener.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.