Des entités en CSS

Bonjour à tous,

mon problème est avant tout un souci de lisibilité des CSS.
Voici un exemple de feuille de style que j'utilise :

p#texteDroite{
    color:#266BB8; /* bleu */
}
[...un peu plus loin ...]
div#autreCadre{
    color:#266BB8; /* bleu */
}

Le problème c'est qu'au lieu d'écrire #266BB8 pour mon bleu j'aimerais pouvoir écrire quelque chose comme &couleur1; ce qui est beaucoup plus lisible, et beaucoup plus facile à se souvenir quand on commence à étendre sa CSS.

Ecrire ceci reviendrait à définir une entité (entity) dans ma css.

Ca possederait aussi l'avantage pour une charte graphique donnée, en plus de la lisibilité, de pouvoir changer la couleur facilement sans avoir à reprendre toute ma css. Ainsi je définis les 3 ou 4 couleurs de ma charte graphique avec des entités, et ça devient très facile à changer.

Je n'ai pas trouvé de moyen de réaliser cela. Je pense que certains vont me proposer de définir une classe.

.couleur1{
    color:#266BB8;
}

Mais ce n'est pas ce que je cherche. Car si maintenant ma couleur bleu dois apparaitre pour la propriété background-color, ça ne marche plus et je dois définir une classe de plus. Et puis aussi une classe pour la couleur des bordure etc.
Cette solution est celle que j'ai utilisée pendant un moment mais elle a 2 défauts : celui donné au-dessus (on fini toujours par déclarer plein de classes) et le 2e qui est la non-séparation de la mise en forme et du contenu. Voici un exemple :

<div class="couleur1 bordure1 couleurFond3">mon texte</div>

On utilise bien des classes. On utilise bien du xhtml et des css. Mais la mise en forme est quand même écrite dans le xhtml. Donc ce n'est pas ce que je cherche.

Donc au final ma question est la suivante :
- Y-a-t-il un moyen de définir des entités dans une feuille CSS ?
- Sinon y-a-t-il une astuce pour arriver à cela ?

Merci par avance.

Bonjour,

Et pourquoi ne pas utiliser un langage dynamique pour écrire ta feuille de style?

Salut Benjamin.
Je peux prendre ton observation de 2 manières, toutes 2 intéressantes.

Solution 1 :
En fait oui j'ai pensé au javascript pour générer la css, surtout que mon site en fera grandement l'utilisation.
Mais au final je trouve que c'est vraiment sale. Je ne conçois pas les css de cette manière.
Et puis dans mon éditeur de code, je perds la coloration syntaxique je pense si je fais ça.

solution 2 :
Je me fais un petit programme qui gère les entités comme j'ai décrit et quand j'enregistre il transforme les entités en #668D78.
Ca serait faisable. Mais ça m'ajoute quand même une étape de conception et je ne peux pas facilement prêter ma feuille de style à quelqu'un (je dois lui fournir mon programme).

Quelqu'un a-t-il d'autres idées ? ou sinon peux-tu développer ton idée Benjamin en fonction de ma réponse ?

Salut,

Pourquoi du javascript, qui risquerait de poser problème en cas de désactivation chez l'utilisateur, et pourrait rendre certains éléments illisibles en raison de couleurs non définies ?
Je pense que Benjamin D.C. pensait au PHP, qui semble la solution la plus adéquate.
Définir une variable pour chaque couleur utilisée, et faire appelle à la variable dans la feuille de style, qui au final remplacera par la bonne couleur en hexadécimal. Enfin je pense.

Pour la coloration syntaxique, tu peux utiliser un logiciel gratuit et en français, tel que PsPad, qui possède la coloration syntaxique pour tout type de code existant (ou presque, je ne les connais pas tous).

Quel que soit ton choix, tu te rajoute forcément des manipulations qui ne sont finalement pas plus compliquées que d'utiliser directement les couleurs en hexadécimal. Fais des commentaires comme dans l'extrait de code que tu nous a donné dans ton premier message, si ca peut t'aider.

Je pense que créer une usine à gaz pour t'éviter çà ne te fera de toute manière rien gagner, car il te faudra à un moment donné rentrer les couleurs en hexa dans une base.
En plus, sur un site bien pensé, il ne doit pas y'avoir des centaines de couleurs, on va dire que si tu arrive à 7-8 c'est déja un maximum.

Et puis sinon, il ne te reste plus qu'à apprendre à "penser hexadécimal" :
de 0 à f du plus foncé au plus clair, rrvvbb (respectivement deux valeurs pour le rouge, deux pour le vert et deux pour le bleu), etc...

Salut,
Sinon une petite astuce, c'est de regrouper les classes qui ont la même couleur, la même typo, ou le même border.

par exemple :

/* Design géneral du site */
.text, .header, .menu{color:#266BB8;}
.box, .left_menu, .news{border: 1px solid #266BB8;}
.title_news, .title_article{background: #266BB8;}

Que tu mets en haut de ton css, de cette maniére quand tu fais des essais graphique, tu change plus rapidement les styles genéraux de ton site.

Atention tout de même a ne pas pousser cette logique trop loin, car tu peux te retrouver a chercher longtemps pourquoi il ne se passe rien quand tu modifies une classe...

Si ta feuille de style est un peu grande des fois la presentation type:

.menu{
color:#266BB8;
font-size:1em;
border-bottom:1px solid #000
}

est plus clair mais prend beaucoup de place et rend pénible la recherche d'un élement, souvent je regroupe des propriétés voisine sur la même ligne ce qui réduit par trois la longueur de ta feuille de style.

.menu{color:#266BB8;font-size:1em;border-bottom:1px solid #000}

Atention non plus a ne pas la rendre confuse. Pour cela utiliser l'espace gagné pour ecrire des commentaires les plus clair possible:

/* Design du menu atention! couleur dans le design généraux */
.menu{;font-size:1em;border-bottom:1px solid #000}
.menu li{padding:3px 5px}

/* Mise en page des textes */
.text{;font-size:0.71em;}
.text p{padding:5px 0 7px 0}

Ce sont des exmples pour expliquer que tu peux presenter te feuille style de maniére à ce que se soit plus clair pour t'y retrouver
Modifié par matmat (15 Mar 2007 - 17:43)

En fait j'aimerais vraiment n'utiliser que ma feuille CSS.
J'ai très peu envie d'ajouter du php pour traiter ma feuille CSS.

Je chercherais vraiment une solution intra-feuille de style. D'où mon idée des entités. Mais apparemment ce n'est pas une solution répandue. Dommage

Merci quand même pour vos idées.

Si les entités n'existent pas dans les css, y-a-t-il un moyen d'implémenter de l'héritage ?

exemple :

/* définition de mes couleurs */
.couleur1{
    color:#6628BF;
}

/* définition de mes cadre, avec un système d'héritage */
div#cadreDroite[extend .couleur1]{
    margin:5px;
}

Bien sûr je ne sais pas si un tel système d'héritage existe, mais si certains peuvent me renseigner, ça pourrait m'intéresser.

Habituellement le css est utilisé basiquement, et je connais plusieurs astuces déjà, comme celle donnée par matmat. Mais j'essaie de repousser les limites

matmat a écrit :
Salut,
Sinon une petite astuce, c'est de regrouper les classes qui ont la même couleur, la même typo, ou le même border.

par exemple :

/* Design géneral du site */
.text, .header, .menu{color:#266BB8;}
.box, .left_menu, .news{border: 1px solid #266BB8;}
.title_news, .title_article{background: #266BB8;}

Sauf que ca peut poser des soucis pour les différents états des liens, pour garder leur déclaration dans l'ordre souhaité pour que tout marche (LoVe HAte). Donc çà ne marche pas pour tout.

Non, ça ne marche pas pour tout, celon les cas il y a des ajustements a faire, mais ça me facilite bien la vie dans nombreux cas par exemple des fois je fais comme ça:

/* Design géneral du site */
/* Bleue turquoise foncé :  #266BB8*/
/* Vert pale :  #246BC8 */
.text, .header, .menu{color:#266BB8;}
.box, .left_menu, .news{border: 1px solid #266BB8;}
.title_news, .title_article{background: #266BB8;}

Et tu change donc en trois copié/colés tout les élements de la même couleur de ton design.

tu peut même mettre dans tes commentaires temporairement des couleurs a essayer, histoire de ne pas avoir a rechercher le code pour tes test.

par exemple:

/* Bleue turquoise foncé :  #266BB8*/
/* Bleue turquoise moyen :  #266BB8*/
/* Bleue outremer :  #266BB8*/
/* Bleue d'egypte :  #266BB8*/

edit: sinon pspad a une fonction rechercher/remplacer qui marche trés bien aussi
Modifié par matmat (15 Mar 2007 - 19:21)

Oui les copier-coller c'est ce que je fais pour l'instant. Mais c'est pas très efficient comme technique.

Je suis partisans du moindre effort ...

Je vais paraître lourd, mais je maintiens ma proposition du premier post...

finalement, voilà un lien (en anglais) qui explique très bien mon problème

http://dorward.me.uk/www/css/inheritance/

J'ai déjà proposé les solutions qui sont données sur la page. Et elle ne me conviennent qu'à moitié. On voit qu'il propose un préprocesseur pour générer des entités ... Finalement c'est surement une chose qui manque aux CSS.

Sinon le moins fatiguant c'est de payer un graphiste...