Mantener Tu Código CSS Limpio

Las hojas de Estilo en Cascada o Cascading Style Sheets (CSS) tienen por objeto separar el estilo de una página web a partir del contenido. Eso tiene sentido por razones de control, también para el embellecimiento del código en general, nos da la facilidad de acomodar nuestro código sin tener todo en un mismo documento el cual podría resultar complicado de leer a simple vista y es que para modo de producción nuestro código tiene que ser legible y entendible a los humanos, porque no somos maquinas.

Entonces podemos decir que si los resultados de CSS son tan hermosos como las sombras, gradientes, etc, ¿el propio CSS puede ser bonito?, creo que no y es que mantener el código es una cuestión de tabulación consistente, el espacio y la sintaxis llega un momento en el que tenemos que por razones obvias mantener nuestro código limpio, ya que cuando tenemos un montón de código aveces no entendemos nada de el y eso dificulta mucho nuestro trabajo haciendo que perdamos mucho tiempo en encontrar lo que buscamos. Afortunadamente, hay algunas herramientas muy buenas para limpiar tu código CSS.

Tabifier

Tabifier es una herramienta para aplicar tabulaciones al código y hacer que luzca correctamente ordenado. El estilo que produce es más de lo que pude hacer cualquier programa. Actualmente soporta CSS, HTML, C y JSON. Para usarlo solo tienes que pegar tu código en la sección de arriba, pulsar el botón Tabify y copiar el código de abajo.

Para un ejemplo claro Tabifier puede ordenar un código de estilo:

.gs-title:hover,.gs-title:hover b{color:#d24e33 !important;}
.gs-title,.gs-title b{font-size:18px !important;}

A este estilo:

.gs-title:hover,.gs-title:hover b {
    color:#d24e33 !important;
}
.gs-title,.gs-title b {
    font-size: 18px !important;
}

Tomando en cuenta que las tabulaciones se hacen a 4 espacios.

Tabifier

Pretty Printer

Pretty Printer es un embellecedor de código muy bien equipado que funciona para PHP, Java, C ++, C, Perl, JavaScript y CSS. Hay un montón de opciones por el momento como añadir nuevos saltos de línea, quitar comentarios, añadir lineas despues de “}”, “;”, “{“, etc. Funciona bastante bien. Uno de los problemas es que el código de salida no está en su propia caja, por lo que no se puede seleccionar todo fácilmente para copiarlo.

PrettyPrinter

Format CSS Online

Esta herramienta posee muchas de las opciones ya mencionadas arriba, también posee la capacidad de ordenar alfabéticamente las propiedades y los estilos de nuestro código y de convertir todo a minúscula.

Format CSS Online

Recomendado