Estoy haciendo algunos desarrolladores web y los diseñadores cortan y exportan de photoshop. El código generado es horrendo. Lo primero que hago es sacar todo de las etiquetas y ponerlas en archivos css. Entonces, me preguntaba si había alguna herramienta que pudiera automatizar esto.etiquetas html a la herramienta css
me gustaría escribir mi propio guión, aquí se puede tomar un poco de inspiración:
esto hace lo contrario, pero si Le gusta Ruby, puede ser Puede estudiar la c oda: busca premailer en github, usa la gema Hpricot.
Por supuesto, si no quieren pasar el tiempo de codificación Puede utilizar tidy:
tidy -clean your-crap-inlined-file.html
Si tu-basura-inline-archivo.html contienen: <p style="color:red;"> Some TEXT ...</p>
lo reemplazará insertar algo como esto
<style type="text/css">
/*<![CDATA[*/
p.c1 {color:red;}
/*]]>*/
</style>
en la parte superior de su archivo y, al mismo tiempo, reemplazar su código en línea con:
<p class="c1">Some TEXT ...</p>
HTML Tidy es una gran herramienta. No hará exactamente lo que usted desea, pero puede ser un buen comienzo si está utilizando html generado. Aquí hay una instancia en línea: http://infohound.net/tidy/
Esa sería una herramienta interesante.
Supongo que mi primera pregunta sería, ¿el photoshop de código se está volviendo semántico? ES DECIR. ¿Habrá un <H1> como el tema principal ... y <p> para los párrafos, etc.
Luego, cuando se trata de CSS ... definitivamente no se creará código de calidad haciendo esto. Sin embargo, me parece que no eres realmente una persona de Front End. Eso hace que cualquier respuesta sea más difícil.
Mejor respuesta: código de la mano ... el código será mejor. Siguiente respuesta: Codificación de mano fuera de la cuestión? hay algunas otras opciones
Un buen tutorial es here .. sin embargo, es básicamente ayudando a mano el código.
¿Quiere decir, por ejemplo, tomando ' blah 'y la salida de una regla CSS que coincidirá con ese lapso particular y definir esas reglas en el CSS (en lugar de en el atributo' estilo')? Sería genial, pero un gran caso de usuario de advertencia, ya que si los elementos implicados no tienen ID, eso será * muy * frágil, dependerá de la estructura HTML específica y se romperá si cambias esa estructura prácticamente. .. –
@TJ: Es posible que desee agregar automáticamente nombres de clase. – SLaks
@SLaks: Ahora que es una buena idea, aunque los nombres de clase derrochadores por todo el lugar (especialmente los dirigidos a elementos específicos) no es necesariamente una mejora sobre el uso de 'estilo'. Pero bueno, es un comienzo, que por lo que parece es todo lo que está buscando. –