28172 sujets

CSS et mise en forme, CSS3

Votre avis sur ces 2 façons de faire

Bonjour à tous,

Je souhaiterai avoir votre avis sur 2 exemples de pages au niveau de la CSS.

Voici la première :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    /* Elements globaux */
    .left {float:left}
    .right {float:right}
    .clear {clear:both}
    /*  Définition de la zone principales  */
    #main {width:900px}
    /*  Définition de la colonne de gauche  */
    #colonneDeGauche {width:500px;padding:20px;border-right:solid 1px #000}
    #ulAlign { border:solid 1px #000;list-style:none;margin:0;padding:0 }
    #ulAlign li {width:200px}
    /*  Définition de la colonne de droite  */
    #colonneDeDroite {width:300px;background:#eee;padding:20px}
    /*  Définition du pied de page  */
    #footer {background:#eee;padding:20px}
    </style>
  </head>
  <body>
    <div id="main">      
      <div id="colonneDeGauche" class="left">
        <h3>Contenu à gauche</h3>
        <ul>
          <li>Zone normale</li>
          <li>toto</li>
          <li>tata</li>          
        </ul>
        
        <ul id="ulAlign">
          <li>Zone avec alignement</li>
          <li class="left">toto left</li>
          <li class="right">tata right</li>
          <li class="clear"></li>
        </ul>

        <ul>
          <li>Zone normale</li>
          <li>toto</li>
          <li>tata</li>          
        </ul>
      </div>
      
      <div id="colonneDeDroite" class="right">
        <h3>Contenu à droite</h3>
      </div>
      <div class="clear"></div>
      
      <div id="footer">pied de page</div>
    </div>
  </body>
</html>


et voici la seconde :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    /* Elements globaux */
    div.spacer {clear:both}
    /*  Définition de la zone principales  */
    #main {width:900px}
    /*  Définition de la colonne de gauche  */
    #colonneDeGauche {width:500px;padding:20px;border-right:solid 1px #000;float:left}
    #ulAlign { border:solid 1px #000;list-style:none;margin:0;padding:0 }
    #ulAlign li {width:200px}
    #ulAlign li.droite {float:right}
    #ulAlign li.gauche {float:left}
    #ulAlign li.spacer {clear:both}
    /*  Définition de la colonne de droite  */
    #colonneDeDroite {width:300px;background:#eee;padding:20px;float:right}
    /*  Définition du pied de page  */
    #footer {background:#eee;padding:20px}
    </style>
  </head>
  <body>
    <div id="main">      
      <div id="colonneDeGauche" >
        <h3>Contenu à gauche</h3>
        <ul>
          <li>Zone normale</li>
          <li>toto</li>
          <li>tata</li>          
        </ul>
        
        <ul id="ulAlign">
          <li>Zone avec alignement</li>
          <li class="gauche">toto left</li>
          <li class="droite">tata right</li>
          <li class="spacer"></li>
        </ul>

        <ul>
          <li>Zone normale</li>
          <li>toto</li>
          <li>tata</li>          
        </ul>
      </div>
      
      <div id="colonneDeDroite" >
        <h3>Contenu à droite</h3>
      </div>
      <div class="spacer"></div>
      
      <div id="footer">pied de page</div>
    </div>
  </body>
</html>


Personnellement, je préfère la première, car le fait de déclarer des classes "génériques" permet de la appliquer partout dans la page quand on en a besoin sans forcement déclarer un élément dans la CSS juste pour lui appliquer un float.
Dans la cas présent, il s'agit d'un float mais si on parle de manière générale, ça pourrait être n'importe quel autre élément de css.
De plus, la page est relativement simple, donc il faut imaginer l'utilisation dans une page beaucoup plus complexe.

Cette notation ne vient pas de moi, mais j'ai vu plusieurs code utilisant ce principe, et j'ai trouvé ça plutôt "intelligent", mais j'aimerai avoir votre avis...

Après peut être que les 2 façons ne sont pas correctes, et que vous avez d'autres manières de faire.
Je suis tout ouie... Smiley biggrin
Merci à vous.
Pascall
On voit de plus en plus la première méthode en effet, ça permettrai non seulement de se resservir d'une class à plusieurs endroits sur un site, mais aussi de s'en resservir sur d'autres sites sans repartir de 0. Evidemment, on parle de CSS beaucoup plus aboutis (permettant entre autre de faire toute sorte de colonne facilement). Une sorte de "framework CSS", cherche sur GG, tu en trouveras quelques bons exemples.

Perso j'ai encore du mal avec ce principe, je ne trouve pas ça plus rapide, avec l'arrivé de CSS3 l'intérêt sera certainement plus élevé.
Personnellement, j'utilise beaucoup la premiere solution.Je mets des classes génériques et lorsque j'ai besoin je mets soit une class en plus d'un id ou alors je joue sur les imbrications.

Par exemple, sur un site je vais faire mon gabarit qui sera le même sur la plupart des pages, ensuite lorsque qui n'ont pas la même mise en page dans ce cas, je joue sur les imbrications ou quand c'est pas possible je rajoute une class au div conteneur.
Ensuite pour les images je créer souvent des classes img_left et img_right et après je les utilise partout, cela me permet en plus d'être sur que j'ai partout les mêmes propriétés (marges..)
Modifié par lkadiss (18 Oct 2010 - 10:34)
Bonjour,

Merci pour vos réponses...
Je pense que je vais continuer ainsi alors...

Il y a autant de manières de faire que de développeurs/intégrateurs, et parfois il est difficile de savoir si telle ou telle manière est judicieuse, quand cela ne saute pas aux yeux. Smiley smile


Merci à vous
bonne journée,

Pascall ( MrBinR )
Sujet clos
Aller à