Ferramenta para gerar esqueleto CSS?

StackOverflow https://stackoverflow.com/questions/16926

  •  08-06-2019
  •  | 
  •  

Pergunta

Meu HTML está todo marcado, pronto para fazer chover CSS.O problema é que preciso voltar e descobrir quais são todos os meus IDs e nomes de classes para poder começar.O que eu preciso é de uma ferramenta que analise meu HTML e gere uma folha de estilo com todos os elementos possíveis prontos para serem estilizados (talvez até com alguns padrões).Existe tal ferramenta?

Foi útil?

Solução

http://lab.xms.pl/css-generator/ parece se encaixar na descrição.

Outras dicas

Eu tenho uma versão pobre disso que usei no passado ...isso requer jquery e 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>

isso lhe dá algo assim:

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

se você quiser que eles estejam na ordem "natural" das páginas ...

<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>

Acabei de carregar a página com aquele script, depois recortei e colei os resultados do firebug...então, obviamente, remova o script :)

você precisará remover os dups manualmente ou apenas adicionar alguma lógica simples de verificação de dups com um mapa ou array ou algo assim.um para IDs e outro para aulas.

Quando vi isso pela primeira vez pensei: “Ótima pergunta!Ótima resposta, danb!"

Depois de pensar um pouco, não tenho certeza se isso é uma boa ideia.É como gerar manipuladores de eventos para todos os controles em uma página ASP.NET ou gerar procedimentos CRUD para todas as tabelas em um banco de dados.Acho que é melhor criá-los conforme necessário por dois motivos:

  1. Menos confusão de declarações de estilo vazias
  2. Menos tentação de usar indevidamente (ou subutilizar) CSS escrevendo tudo no nível da classe em vez de usar seletores descendentes como (#navigation ul li a).

Concordo com Jon, mas não vejo problema* em fazer o que o OP deseja.Usando o script fornecido, você conhecerá todas as suas classes e IDs.Ao trabalhar em seu CSS, você deve decidir se deseja precisar para usar cada um deles.No final, ou no momento em que você sentir que tem um bom controle sobre o que está fazendo, execute-o em um otimizador/compressor para remover ids e classes não utilizadas.

*Suposição operacional:Você não escreveu o HTML original ou escreveu e depois decidiu que "o Deus CSS seria muito bom aqui agora, eu gostaria de ter começado com isso". :-)

Não que não seja uma pergunta sensata com uma resposta sensata, mas implicava para mim o tipo de HTML desnecessariamente marcado que as pessoas criam quando não entendem os seletores posicionais:o tipo de código onde tudo tem uma classe e um id.

<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>

você pode remover tudo, exceto o id na div e ainda poder estilizar tudo por sua posição;e obviamente, o script não mostrará tudo aqueles possíveis seletores, certo?

Em outras palavras, um foco restrito no CSS como algo feito para classes e ids é uma preocupação.

Esta entrada de blog faz referência a algo semelhante ao que você precisa aqui.

Ele contém um link para um script Perl chamado 'estilizador.pl'.Este script analisa o html para procurar possíveis elementos CSS e os envia para um arquivo.

Outra maneira de abordar isso é padronizar os nomes de id e classe que você usa em seu HTML de acordo com algum tipo de convenção de nomenclatura.

Eu discordo de Jon.Embora esta solução possa ser mal utilizada da forma como ele descreve, isso não significa necessariamente que o será.Qualquer desenvolvedor ou designer sábio pegará as classes CSS geradas pelo script e puxará apenas o que é realmente necessário para o arquivo CSS.

A solução ainda resolve a questão do OP.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top