Por “inyección de estilo”, me refiero a poder ver los cambios de estilo inmediatamente después de crearlos sin tener que actualizar manualmente la ventana del navegador. Este no es un concepto completamente nuevo, solo lo menciono ahora porque es tan asombroso que si no es parte de su flujo de trabajo, debería considerar actualizar el suyo para incluirlo.
El pasado
Durante mucho tiempo, Dreamweaver tuvo la capacidad de mostrarle una vista previa en vivo de lo que estaba construyendo. CSS Edit también tenía algo así. Ahora que está integrado en Espresso y, de un vistazo rápido, vi que todavía tiene vistas previas pero no vistas previas editables de panel dividido.
Pero usaron algo de WebKit incorporado para hacerlo, ejecutando quién sabe exactamente qué versión. Me gusta hacer mis pruebas en los navegadores que usa la gente. Y además, esos no funcionarán muy bien cuando esté preprocesando CSS.
No se ofenda si usa y estos editores o trabajan de esta manera, simplemente no es para mí.
Nuevo estilo
El primero en aparecer que conocí fue LiveReload. A través de las extensiones del navegador, a medida que guarda archivos, los cambios se inyectan automáticamente.
El nombre “LiveReload” implica que recarga la página por usted, lo cual es cierto cuando cambia HTML o JavaScript. Incluso eso es útil, ya que ahorra el cambio de aplicaciones y la actualización manual de la página. Pero cuando cambia CSS (ya sea que esté preprocesado o no), los estilos se “inyectan”, lo que significa que surten efecto en la página sin una actualización.
Soy fanático de CodeKit, que también ha estado haciendo esto durante un buen tiempo. CodeKit solo funciona con Safari y Chrome de esta manera, pero lo hace automáticamente sin extensiones de navegador.
Si está dispuesto a poner una etiqueta de secuencia de comandos en su página, LiveReload funciona en Chrome, Safari, Firefox, Mobile Safari y Opera (con arreglos). Sin la etiqueta de secuencia de comandos, puede hacer que funcione en Safari, Chrome y Firefox.
Mixture también se actualizará en vivo, pero aún no he investigado cómo lo están haciendo. Yeoman tiene refrescante pero no inyectable. Es de código abierto, por lo que tal vez alguien pueda agregarlo =).
¿Por qué Style Injection es genial?
Debido a que la página no se actualiza, puede diseñar la página sin afectar su estado. Supongamos que tiene un cuadro de diálogo que aparece con un clic y desea modificar el estilo de ese cuadro de diálogo. Mientras usa una aplicación que hace inyección de estilo, puede dejar ese cuadro de diálogo abierto en el navegador y crear el CSS que lo cambia y ver cómo esos cambios suceden inmediatamente sin actualizar el navegador y perder ese estado. No todos los estados tienen un cambio de URL asociado. Un cuadro de diálogo es un ejemplo común de eso.
Aquí tienes un ejemplo de eso:
Esto se vuelve más útil cuanto más complejo es el estado. Imagine que está intentando modificar el estilo de un rollover de un menú desplegable personalizado que aparece en un panel que está cerrado de forma predeterminada. Son muchos los pasos para reproducir ese estado para cada cambio de estilo menor.
Configuración de pantalla
Me encanta usar Divvy para ajustar muy rápido mi editor de código a la derecha y el navegador a la izquierda y comenzar a trabajar de inmediato. He configurado Divvy para que solo tenga cuadros de izquierda y derecha, sin cuadrículas complejas.
Para el registro
CodePen realiza actualizaciones en vivo a medida que escribe y tiene un modo de visualización en vivo. Creo que bastante genial y útil, pero CodePen todavía no es realmente para su flujo de trabajo de desarrollo web real.