Outil pour générer un squelette CSS ?

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

  •  08-06-2019
  •  | 
  •  

Question

Mon code HTML est entièrement balisé, prêt à faire pleuvoir du CSS.Le problème est que je dois revenir en arrière et découvrir quels sont tous mes identifiants et noms de classe pour pouvoir commencer.Ce dont j'ai besoin, c'est d'un outil qui analyse mon code HTML et génère une feuille de style avec tous les éléments possibles prêts à être stylisés (peut-être même avec quelques valeurs par défaut).Un tel outil existe-t-il ?

Était-ce utile?

La solution

http://lab.xms.pl/css-generator/ semble correspondre à la description.

Autres conseils

J'en ai une version pour homme pauvre que j'ai utilisée dans le passé...cela nécessite jquery et 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>

ça te donne quelque chose comme ça :

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

si vous les voulez plutôt dans l'ordre des pages "naturel"...

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

Je charge simplement la page contenant ce script, puis je coupe et colle les résultats depuis Firebug...alors évidemment, supprimez le script :)

vous devrez supprimer les doublons manuellement ou simplement ajouter une simple logique de vérification des doublons avec une carte ou un tableau ou quelque chose du genre.un pour les identifiants et un pour les classes.

Quand j'ai vu ça pour la première fois, je me suis dit : « Excellente question !Bonne réponse, putain !"

Après réflexion, je ne suis pas sûr que ce soit une bonne idée.C'est un peu comme générer des gestionnaires d'événements pour tous les contrôles d'une page ASP.NET ou générer des procédures CRUD pour toutes les tables d'une base de données.Je pense qu'il est préférable de les créer selon les besoins pour deux raisons :

  1. Moins d'encombrement dû aux déclarations de style vides
  2. Moins de tentation d'abuser (ou de sous-utiliser) CSS en écrivant tout au niveau de la classe plutôt que d'utiliser des sélecteurs descendants comme (#navigation ul li a).

Je suis d'accord avec Jon, mais je ne vois pas de problème* à faire ce que veut le PO.En utilisant le script fourni, vous connaîtrez toutes vos classes et identifiants.Pendant que vous travaillez sur votre CSS, vous devriez décider si vous besoin d'utiliser chacun d'eux.À la fin, ou au moment où vous sentez que vous maîtrisez bien ce que vous faites, exécutez-le via un optimiseur/compresseur afin qu'il supprime les identifiants et les classes inutilisés.

*Hypothèse de fonctionnement :Soit vous n’avez pas écrit le code HTML d’origine, soit vous l’avez écrit et vous avez décidé plus tard que « bon sang, le CSS serait vraiment bien ici maintenant, j’aurais aimé commencer par lui. » :-)

Non pas que ce ne soit pas une question sensée avec une réponse sensée, mais cela impliquait pour moi le genre de code HTML inutilement balisé que les gens créent lorsqu'ils ne comprennent pas les sélecteurs de position :le genre de code où tout a une classe et un identifiant.

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

vous pouvez tout supprimer sauf l'identifiant sur le div et toujours pouvoir tout styliser en fonction de sa position ;et évidemment, le script ne vous montrera pas tout ceux sélecteurs possibles, n'est-ce pas ?

En d’autres termes, une focalisation étroite sur CSS en tant que quelque chose apporté aux classes et aux identifiants est une préoccupation.

Cette entrée de blog fait référence à quelque chose de similaire à ce dont vous avez besoin ici.

Il contient un lien vers un script Perl appelé 'styliseur.pl'.Ce script analyse le code HTML pour rechercher d'éventuels éléments CSS et les affiche dans un fichier.

Une autre façon d'aborder cela consiste à normaliser les noms d'identifiant et de classe que vous utilisez dans votre code HTML en fonction de une sorte de convention de dénomination.

Je ne suis pas d'accord avec Jon.Même si cette solution peut être mal utilisée de la manière qu’il décrit, cela ne signifie pas nécessairement qu’elle le sera.Tout développeur ou concepteur avisé va prendre les classes CSS générées par le script et extraire uniquement ce qui est vraiment nécessaire dans le fichier CSS.

La solution résout toujours la question du PO.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top