es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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.

Herramientas de OCR gratuitas para extraer texto de imágenes: lo mejor de

Herramientas de OCR gratuitas para extraer texto de imágenes: lo mejor de

Si está buscando extraer texto de una imagen, la herramienta OCR es lo que debe usar. Las herramientas de reconocimiento óptico de caracteres (OCR) pueden escanear y extraer texto de imágenes y le permite realizar los cambios necesarios.En esta publicación, enumeraré las mejores herramientas gratuitas de OCR disponibles para diferentes plataformas . Par

(Consejos de tecnología y diseño)

The New Gmail - Diseño de materiales y 8 nuevas características

The New Gmail - Diseño de materiales y 8 nuevas características

Recientemente, Gmail recibió una importante actualización, que brinda la bella interfaz de diseño de materiales a nuestro proveedor de correo electrónico favorito. Eso no es todo, presenta muchas características solicitadas para ayudar a organizar las opciones de la bandeja de entrada para enviar respuestas inteligentes, posponer correos electrónicos y acceder a eventos, notas y más directamente dentro de Gmail.En gen

(Consejos de tecnología y diseño)