Clasificación y organización de CSS mediante CSSComb

En comparación con otros lenguajes relacionados con la web, CSS es relativamente sencillo y fácil de escribir . Pero al mismo tiempo, también es difícil de organizar, particularmente cuando se trata de códigos que consisten en miles de líneas.

Sería genial si pudiéramos organizar CSS y facilitar que otros desarrolladores lean y mantengan los códigos, lo cual es útil si trabajas en equipo.

En esta publicación, le mostraremos cómo ordenar y organizar CSS utilizando una herramienta llamada CSSComb . Pero primero, echemos un vistazo a un breve ejemplo sobre el orden de propiedad de CSS.

Técnicamente, CSS no tiene restricciones cuando se trata de ordenar propiedades. El siguiente ejemplo ...

 .class {background-color: # f3f3f3; ancho: 100px; altura: 100px; font-color: # 000; } 

... producirá el mismo resultado que el siguiente:

 .class {width: 100px; font-color: # 000; color de fondo: # f3f3f3; altura: 100px; } 

Pero como mencionamos anteriormente, organizarse ayudará a tus compañeros a mantener fácilmente tus códigos. Sin embargo, la ordenación de códigos CSS requiere una gran cantidad de recortes y pegados, y reflexiones sobre cómo ordenarlos. Y ahí es donde CSSComb es útil.

Cómo usar CSSComb

CSSComb es una utilidad de clasificación para CSS creada por Slava Oliyanchuk . CSSComb admite CSS2 a CSS4, y está disponible en muchos editores de código populares, como TextMate, Coda, Notepad ++ y Sublime Text, como un complemento o una extensión.

Si está utilizando Sublime Text, CSSComb puede instalarse fácilmente a través del Control de paquetes. Una vez instalado, puede ordenar las propiedades de CSS de varias maneras:

• Pulse la combinación de teclas predeterminada: Shift + Ctrl + C.
• Haga clic derecho y seleccione: Ordenar por la opción CSSComb .
• Abrir la paleta de comandos - Comando + Shift + P y seleccionar Ordenar a través de CSSComb .

En este ejemplo, tenemos la siguiente regla de estilo.

 .class {padding-top: 1px; border-left: 1px solid #fff; -moz-box-shadow: 0 0 1px 0 # 000; -webkit-box-shadow: 0 0 1px 0 # 000; caja-sombra: 0 0 1px 0 # 000; border-right: 1px solid #fff; altura: 23px; fondo de relleno: 10px; color de fondo: #fff; } 

La regla de estilo anterior funciona, y no tiene nada de malo, excepto que está un poco desorganizada. Ahora, después de ejecutar CSSComb, las propiedades se ordenan en el siguiente orden.

 .site-header> .container {padding-top: 1px; fondo de relleno: 10px; altura: 23px; border-right: 1px solid #fff; border-left: 1px solid #fff; color de fondo: #fff; -webkit-box-shadow: 0 0 1px 0 # 000; -moz-box-shadow: 0 0 1px 0 # 000; caja-sombra: 0 0 1px 0 # 000; } 

Arriba está la regla de pedido predeterminada en CSSComb, pero si no desea ordenarla así, puede personalizar el pedido, yendo al menú Preferencias> Configuración de paquetes> CSSComb y configurando una nueva regla de pedido bajo Ordenar - Usuario .

Nota : Si está utilizando un editor de código que no tiene la extensión o el complemento, CSSComb también está disponible como herramienta web.

6 alternativas de CyanogenMod para su dispositivo Android

¿Quieres cambiar de CyanogenMod ? Este artículo lo ayudará a elegir la mejor alternativa para CyanogenMod, un firmware personalizado alternativo que le encantará flashear en su teléfono.CyanogenMod, sin lugar a dudas, es una de las mejores innovaciones que jamás haya sucedido en el mundo de Android. Sin

(Consejos de tecnología y diseño)

Guía para principiantes de CSS3

Este artículo es parte de nuestra "serie de tutoriales de HTML5 / CSS3", dedicada a ayudarlo a ser un mejor diseñador y / o desarrollador. Haga clic aquí para ver más artículos de la misma serie. Desde el anuncio de 2005, el desarrollo del nivel 3 de Cascading Style Sheet o mejor conocido como CSS3 ha sido observado y monitoreado de cerca por muchos diseñadores y desarrolladores. Todo

(Consejos de tecnología y diseño)