28172 sujets

CSS et mise en forme, CSS3

Nom choisi pour les id et classes : distinction fond et forme

Bonsoir,

L'intérêt des CSS, si j'ai tout bien compris, c'est de pouvoir (entre-autres) dissocier le fond et la forme.

Donc si on applique ce précepte, que pensez-vous de ceci ?

.arbre{
    background....
}
.fleur{
    background....
}
.rouge{
    forecolor:#ff0000;
}


Dans cet exemple, bien qu'utilisant des CSS, j'introduis dans le code HTML des informations de contenus (arbre, fleur, rouge)...

Si on souhaite remplacer l'illustration représentant un arbre par une autre représentant un train, on pourra n'intervenir qu'au niveau des CSS, mais le code HTML sera étrange, puisque là où une classe indique "arbre", on affichera en fait un train.

Ne vaudrait-il pas mieux alors écrire, comme noms de classes :

.photo1
.photo2
.important
etc.

?

Cette question est peut-être bête, mais en regardant les sources de certains sites, on remarque que les CSS contiennent très souvent des indications de ce qui est affiché.

A moins que ce soit moi qui n'ai rien compris ? (ce qui est possible).
Modifié par _Yannick_ (19 Mar 2009 - 22:01)
Pour une lisibilité il est en effet recommander de donner
un nom qui reflète le contenu. Il en est de même dans tous les langages.

Ce principe fait partie des conventions en quelque sorte. Lorsque c'est
une équipe qui se partagent les données, celà devient évident, essentiel.


function nimportequoi(a, b)
{
  return a + b;
}
nimportequoi(12, 12); // 24
//.
//.. n'est pas aussi représentatif que :
//.
function addition(a, b)
{
  return a + b;
}
addition(12, 12); // 24


Dans ton cas tu as créer une zone de chargement photos qui risque la mise à jour. Il est donc important que tu mentionne le rôle de cette zone comme photo ou zonePhoto pour ton bloc conteneur.

En fait les façons sont multiples, cependant choisi toujours la lisibilité et la compréhension immédiate de tes intentions.

Une autre façon peut très bien faire. Surtout si le chargement des données provient d'un fichier xml.

Ici j'opère par secteur d'images :
valide surtout si : background-image


#paysage-001 {...}
#paysage-002 {...}
#portrait-001 {...}
#portrait-002 {...}
#automobile-001 {...}
#automobile-002 {...}


Exemples de bloc-conteneur :


#bloc-conteneur-paysages {...}
#bloc-conteneur-portraits {...}
#bloc-conteneur-automobiles {...}

<div id='bloc-conteneur-paysages'>
<div id='paysage-001'></div>
<div id='paysage-002'></div>
</div>
<!-- -->
<div id='bloc-conteneur-portraits'>
<div id='portrait-001'></div>
<div id='portrait-002'></div>
</div>
<!-- ect...-->


Si tu cible une url :
Tu pourras donc avoir un seul objet « css » chargeur d'images.


#bloc-conteneur-paysages {}
#bloc-conteneur-portraits {}
#bloc-conteneur-automobiles {}
.zoneImage { margin-bottom:3px; }

<div id='bloc-conteneur-paysages'>
<div class='zoneImage'><img src='images/png/paysage_001.png/></div
<div class='zoneImage'><img src='images/png/paysage_002.png'/></div>
ect...
</div>
<div id='bloc-conteneur-portraits'>
<div class='zoneImage'><img src='images/png/portrait_001.png/></div
<div class='zoneImage'><img src='images/png/portrait_002.png'/></div>
ect...
</div>
<!-- ect... -->


Dans l'exemple ci-haut mentionner c'est le bloc-conteneur qui est
représentatif du contenu, zoneImage étant strictement identique.

Avec un peu de script tu peut offrir un contrôle utilisateur
permettant aux visiteurs de faire un choix entrent les différents
bloc-conteneurs. Ceux-ci étant parents les enfants seront présent aussi.

Conserve l'idée que la lisibilité et la compréhension du script est une bonne pratique. Si donc tu quitte un script pendant trois mois et que tu y reviens, tu en aura la compréhension assez rapidement et, si tu le partage avec d'autres développeurs, ils comprendront sûrement.

Considère les exemples comme étant des suggestions
Après tout rien n'est coulé dans le béton.

++ : Smiley smile
Modifié par zardoz (20 Mar 2009 - 13:46)
Salut,

@zardoz > pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance. Smiley cligne

@_Yannick_ > si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Re- Smiley cligne


Edit: @zardoz > en passant tu utilises plusieurs fois le même id zoneImage ce qui est invalide.
Modifié par Heyoan (20 Mar 2009 - 11:39)
Merci de me remettre à l'ordre :
C'est !important et c'est modifier.

Thank ++
Modifié par zardoz (20 Mar 2009 - 13:53)
Sujet clos
Aller à