Générer vos classes CSS automatiquement
à partir de votre code HTML

Le , par FirePrawn, Expert éminent sénior
Je vous propose un petit générateur de CSS très simple.

En effet, le générateur fournit par css-tr.com vous permet de générer votre code CSS (uniquement les définitions bien sûr) en parsant votre code HTML.
Ainsi, pour chaque élément le générateur regarde s'il trouve un attribut id ou un attribut class et ajoute le code CSS correspondant.

Pour le code HTML suivant :

Code html : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
<div id="header"> 
	<a class="logo"></a> 
</div> 
<div id="content"> 
	<div class="main"> 
		<h1 class="title">HTML to CSS Class</h1> 
		<p class="info">Welcome to my website!</p> 
	</div> 
</div>	 
<div id="footer"> 
	<a class="footer-link-a">Homepage</a> 
</div>

Nous obtenons avec le générateur le code CSS suivant :

Code css : Sélectionner tout
1
2
3
4
5
6
7
8
#header {}  
#content {}  
#footer {}  
.logo {}  
.main {}  
.title {}  
.info {}  
.footer-link-a {}

À vous de tester !

Générateur de code CSS.

Source : css-tr.com

Et vous ?

Utilisez-vous un outil du même genre pour simplifier l'écriture de votre code CSS ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de Torgar Torgar - Rédacteur https://www.developpez.com
le 01/08/2013 à 10:47
C'est pas mal et pratique.

Mais en général je fais mon CSS en même temps que je déclare mes id ou class dans mon HTML. Donc au final, je n'ai pas besoin de ce genre d'outil.

Ce qui pourrait être pas mal à rajouter sur leur outil, c'est de pouvoir hiérarchiser le CSS.

En reprenant ton exemple :
Code html : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
<div id="header"> 
	<a class="logo"></a> 
</div> 
<div id="content"> 
	<div class="main"> 
		<h1 class="title">HTML to CSS Class</h1> 
		<p class="info">Welcome to my website!</p> 
	</div> 
</div>	 
<div id="footer"> 
	<a class="footer-link-a">Homepage</a> 
</div>
Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
#header {}  
#header .logo {} 
 
#content {}  
#content .main {} 
#content .main .title {}  
#content .main .info {}  
 
#footer {} 
#footer .footer-link-a {}
Et pourquoi pas en fonction d'un certain niveau de hiérarchie.
Avatar de RhoManu RhoManu - Membre du Club https://www.developpez.com
le 11/08/2013 à 19:26
Intéressant.

Perso je bosse sur Dreamweaver, qui a le bon goût de faire quelque chose du même genre.

Par contre, ton idée de hiérarchie est excellente Torgar ! Je vais voir si y a pas moyen d'en faire une extension DW.
Avatar de DigiTela DigiTela - Candidat au Club https://www.developpez.com
le 03/01/2016 à 1:38
Bonjour,

Merci pour cet outil.
Je recherche pour ma part un outil capable de supprimer les id ou classe inutile d'une feuille CSS si ces dernières ne sont pas utilisé dans le HTML.

C'est dans le cadre de recyclage et d'optimisation des feuilles de styles d'un site à un autre...

Si quelqu'un connait ça...
Offres d'emploi IT
Spécialiste systèmes informatiques qualité et référent procédure H/F
Safran - Ile de France - Colombes (92700)
Ingénieur intégration, validation, qualification du système de drone H/F
Safran - Ile de France - Éragny (95610)
Ingénieur analyste programmeur (H/F)
Safran - Auvergne - Montluçon (03100)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique CSS : Xavier Lecomte -