paginas - manual css

Herramienta para generar CSS esqueleto?

Question

Mi HTML está marcado, listo para hacer que llueva CSS. El problema es que tengo que volver y averiguar cuáles son todos mis nombres de identificación y clase para poder comenzar. Lo que necesito es una herramienta que analiza mi HTML y escupe una hoja de estilo con todos los elementos posibles listos para ser diseñados (tal vez incluso con algunos valores predeterminados). ¿Existe tal herramienta?

Answer 1

No es que no sea una pregunta sensata con una respuesta sensata, pero me implicó el tipo de HTML innecesariamente marcado que las personas crean cuando no entienden los selectores de posición: el tipo de código donde todo tiene una clase y un carné de identidad.

<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 el ID en el div y aún así puedes diseñar todo por su posición; y, obviamente, el guión no te mostrará todos esos posibles selectores, ¿verdad?

En otras palabras, un enfoque estrecho en CSS como algo hecho para las clases y los identificadores es una preocupación.

Answer 2

Cuando lo vi por primera vez, pensé: "¡Gran pregunta! ¡Respuesta ordenada, danb!"

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 en una base de datos. Creo que es mejor crearlos según sea necesario por dos razones:

1. Menos desorden de declaraciones de estilo vacías
2. Menos tentación de usar incorrectamente (o infrautilizar) CSS escribiendo todo en el nivel de clase en lugar de usar selectores descendientes como (#navigation ul li a).

Answer 3

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

Contiene un enlace a un script de Perl llamado '' stylizator.pl ''. Este script analiza el html para buscar posibles elementos CSS y los envía a un archivo.

Answer 4

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 quiere en orden de página "natural" en su lugar ...

<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 cargué la página con esa secuencia de comandos, luego corté y pegué los resultados de Firebug ... luego, obviamente, eliminé el script :)

Tendrás que eliminar los dups manualmente o simplemente echar un poco de lógica de verificación doble con un mapa o matriz o algo ... uno para los ID y otro para las clases.

Answer 5

Estoy de acuerdo con Jon, pero no veo un problema * con hacer lo que el OP quiere. Con la secuencia de comandos proporcionada, conocerás todas tus clases y tus id. Mientras trabaja en su CSS, debe decidir si necesita usar cada uno de ellos. Al final, o en el punto en el que sientes que tienes un buen manejo de lo que estás haciendo, ejecútalo a través de un optimizador / compresor para eliminar los identificadores y las clases no utilizados.

* Hipótesis operativa: o no escribiste el código HTML original o lo escribiste y luego decidiste que "Gosh CSS sería realmente agradable aquí ahora, ojalá hubiera empezado". :-)

Answer 6

No estoy de acuerdo con Jon. Si bien esta solución se puede utilizar mal en la forma que describe, no necesariamente significa que lo hará. Cualquier desarrollador o diseñador inteligente tomará las clases de 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.

Answer 7

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

Answer 8

http://lab.xms.pl/css-generator/ parece ajustarse a la descripción.