¿Herramienta para generar esqueleto CSS?

Question

Mi HTML está todo marcado, listo para hacer llover CSS.El problema es que tengo que regresar y averiguar cuáles son todos mis ID y nombres de clases para poder comenzar.Lo que necesito es una herramienta que analice mi HTML y genere una hoja de estilo con todos los elementos posibles listos para aplicar estilo (tal vez incluso con algunos valores predeterminados).¿Existe tal herramienta?

Answer 1

http://lab.xms.pl/css-generator/ Parece encajar con la descripción.

Answer 2

Tengo una versión pobre de esto que he usado en el pasado...esto requiere jquery y firebug...

<script type="text/javascript">
    $(document).ready(function() {

        $('*[@id]').each(function() {
            console.log('#' + this.id + ' {}');
        });
        $('*[@class]').each(function() {
            $.each($(this).attr('class').split(" "), function() {
                console.log('.' + this + ' {}');
            });
        });
     });
</script>

te da algo como esto:

#spinner {}
#log {}
#area {}
.cards {}
.dialog {}
.controller {}

si los quieres en orden de página "natural"...

<script type="text/javascript">
    $(document).ready(function() {
         $('*').each(function() {
             if($(this).is('[@id]')) {
                 console.log('#' + this.id + ' {}');
             }
             if($(this).is('[@class]')) {
                 $.each($(this).attr('class').split(" "), function() {
                     console.log('.' + this + ' {}');
                 });
             }
         });
     });
</script>

Simplemente cargo la página con ese script allí, luego corto y pego los resultados de Firebug...entonces obviamente, elimina el script :)

Tendrá que eliminar los duplicados manualmente o simplemente agregar alguna lógica simple de verificación de duplicados con un mapa o matriz o algo así.uno para identificaciones y otro para clases.

Answer 3

Cuando vi esto por primera vez, pensé "¡Excelente pregunta!¡Buena respuesta, gracias!"

Después de pensarlo un poco, no estoy tan seguro de que sea una buena idea.Es un poco como generar controladores de eventos para todos los controles en una página ASP.NET o generar procedimientos CRUD para todas las tablas de una base de datos.Creo que es mejor crearlos según sea necesario por dos razones:

1. Menos desorden debido a declaraciones de estilo vacías
2. Menos tentación de hacer un mal uso (o infrautilizar) CSS al escribir todo en el nivel de clase en lugar de usar selectores descendientes como (#navigation ul li a).

Answer 4

Estoy de acuerdo con Jon, pero no veo ningún problema* en hacer lo que quiere el OP.Usando el script proporcionado, conocerá todas sus clases e identificaciones.Mientras trabajas en tu CSS, deberías decidir si necesidad para utilizar cada uno de ellos.Al final, o en el punto en el que sienta que tiene un buen control de lo que está haciendo, ejecútelo a través de un optimizador/compresor para que elimine los identificadores y clases no utilizados.

*Supuesto operativo:O no escribiste el HTML original o lo escribiste y luego decidiste que "Gosh CSS sería realmente agradable aquí ahora, desearía haber comenzado con él". :-)

Answer 5

No es que no sea una pregunta sensata con una respuesta sensata, pero para mí implicaba el tipo de HTML innecesariamente marcado que la gente crea cuando no entiende los selectores posicionales:el tipo de código donde todo tiene una clase y una identificación.

<div id="nav">
  <ul id="nav_list">
    <li class="nav_list_item">
        <a class="navlist_item_link" href="foo">foo</a>
    </li>
    <li class="nav_list_item">
        <a class="navlist_item_link" href="bar">bar</a>
    </li>
    <li class="nav_list_item">
        <a class="navlist_item_link" href="baz">baz</a>
    </li>
  </ul>
</div>

puedes eliminar todo excepto la identificación en el div y aún así poder diseñar todo allí según su posición;y obviamente, el guión no te mostrará todo aquellos posibles selectores, ¿lo hará?

En otras palabras, es preocupante un enfoque limitado en CSS como algo que se hace con clases e identificadores.

Answer 6

Esta entrada de blog hace referencia a algo similar a lo que necesitas. aquí.

Contiene un enlace a un script Perl llamado 'estilizador.pl'.Este script analiza el html para buscar posibles elementos CSS y los genera en un archivo.

Answer 7

Otra forma de abordar esto es estandarizar la identificación y los nombres de clase que usa en su HTML de acuerdo con algún tipo de convención de nomenclatura.

Answer 8

No estoy de acuerdo con Jon.Si bien esta solución puede usarse mal en la forma que él describe, eso no significa necesariamente que así sea.Cualquier desarrollador o diseñador inteligente tomará las clases CSS generadas por el script y extraerá solo lo que realmente se necesita en el archivo CSS.

La solución aún resuelve la pregunta del OP.