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 ayudar con tus primeros pasos con CSS, las hojas de estilo en cascada. En este vídeo te voy a dar algunas pautas para ordenar tu CSS.

Antes de empezar, 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.

Un fichero CSS puede llegar a tener cientos o incluso miles de líneas, por lo que pueden aparecer problemas importantes en su creación y mantenimiento futuro. Por ejemplo, algunos de los problemas que pueden aparecer son:

• Reglas no utilizadas, que lo único que hacen es incrementar el tamaño del fichero CSS.
• Reglas duplicadas, que indican lo mismo o son contradictorias, y crean confusión cuando se quiere modificar el CSS.
• Propiedades heredadas que pasan desapercibidas y no se tienen en cuenta cuando se modifica un CSS.
• Y, por supuesto, el tiempo que se pierde para localizar una regla entre miles de líneas.

Para evitar estos problemas, es necesario organizar un fichero CSS de alguna forma. Cada uno tiene que desarrollar su estilo propio, con el que se sienta más a gusto. Algunas posibilidades son:

• Organizar las reglas por orden alfabético.
• Organizar las reglas por orden de aparición.
• Separar las reglas según la función que realizan.
• Organizar las propiedades de una regla por orden alfabético.
• Organizar las propiedades de una regla del exterior del elemento al interior.

Y, por supuesto, utiliza los comentarios de CSS /* */ para separar las diferentes partes de un CSS y para desactivar ciertas propiedades cuando quieras realizar pruebas.

Te aconsejo que leas el artículo “Consejos para organizar tus archivos CSS” y “CSS: Cómo organizar estilos”. En estos dos artículos encontrarás consejos y ejemplos que te ayudarán a desarrollar tu propia forma de ordenar tus hojas de estilo CSS.

Por último, algunas herramientas que te pueden ayudar a organizar tu código CSS o a comprimirlo y optimizarlo reduciendo su tamaño. Primero, Styleneat, una aplicación web que organiza el código CSS en función de varios parámetros. Styleneat puede aplicar sangría de forma automática a un fichero CSS para que su lectura sea más fácil.

Otra herramienta es CleanCSS, que tiene la opción de optimizar y reducir un CSS. Además, puede convertir los selectores a minúsculas y puede ordenar el CSS alfabéticamente, aunque eso es una operación peligrosa que puede modificar la visualización de la página.

Por último, CSS Compressor, que optimiza un CSS eliminando el contenido que no es necesario, como saltos de línea o espacios en blanco. Al final del proceso de optimización muestra un resultado en el que se puede comprobar el porcentaje de reducción obtenido en el CSS optimizado.

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.