¿Necesitas Maquetar o Diseñar una web? ... Consulta nuestra sección Maquetación Freelance o solicita presupuesto a elmaquetadorweb@gmail.com

2.1.19

Cómo ordenar automáticamente las propiedades CSS - Organizar CSS - Agrupar CSS - CSSComb

Según varios expertos como Nicolas Gallagher, creador del famoso micro hack clearfix para evitar el colapsamiento de elementos flotados, en su interesante artículo principios para escribir código CSS idiomático y consistente, nos recomienda agrupar nuestras propiedades CSS por funcionalidad.

En una encuesta realizada el año 2012 a más de 10.000 programadores, que podemos consultar en css-tricks, el 45% de los programadores agrupan las propiedades por funcionalidad, el 39% no las agrupa, el 14% las agrupa por orden alfabético y el 2% por la longitud de la propiedad.

He de confesar que era de los que ordenaba alfabéticamente las propiedades CSS, quizás por la falta de una aplicación que lo hiciera automáticamente por tipo de propiedad.

Sabemos que escribir código CSS ordenado y limpio, puede ser muy tedioso, sobre todo si hablamos de archivos grandes, y si encima tenemos que ir agrupando manualmente las propiedades por funcionalidad, nos va a ser muy complicado conseguirlo.

Para ordenar automáticamente nuestros CSS, os traemos, CSSComb, sin duda, una de las mejores aplicaciones con la que nos hemos encontrado en los últimos años, la cual hemos probado en numerosas ocasiones y os podemos asegurar que no altera el resultado final de vuestra web.

CSSComb es una aplicación de código abierto escrita en PHP,  para Grunt, Sublime Text, Brunch y Brackets, compatible con SASS y LESS y con soporte para CSS2 - CSS2.1 - CSS3 - CSS4,  que nos permite:

- Ordenar las propiedades de nuestro código CSS como queramos, la mayor ventaja es que puedes compartir fácilmente tus configuraciones con otros usuarios.

-  Dispone de una versión online que ordena automáticamente nuestras propiedades CSS por funcionalidad, el orden es el siguiente:

  • Propiedades de Texto: font-family, font-size, line-height ...
  • Propiedades de Posicionamiento: position, z-index, top ...
  • Propiedades de Modelo de caja: box-sizing, width, height ...
  • Propiedades de Colores: color, background, border-color ...
  • Otras propiedades: cursor, content ...

- Unificar:

  • Poner las propiedades en una línea o en varías.
  • Indentaciones.
  • Tabuladores o espacios.
  • Números: 0 - 0px.
  • Colores:  #ff2222 - #FF2222.
  • Comillas: ' - ".

- Te avisa si tu código CSS contiene errores.

- Borra clases vacías.

- Es bastante inteligente entiende:

  • Los prefijos de navegadores (vendor prefixes).
  • Los hacks de los navegadores.
  • Si no entiende una propiedad la coloca al final e la clase.
En resumen, ordenar y agrupar nuestros CSS por funcionalidad es una gran idea, nos ayuda a tener un código CSS modulable, reusable y limpio, además nos va a avisar si hemos puesto dos propiedades iguales en el mismo selector, no podemos pedir más.

Para terminar os dejamos su enlace en GitHub y toda la documentación acerca de su configuración.









No hay comentarios:

Publicar un comentario