Organisation CSS

Organisation CSS - HTML/CSS - Programmation

Marsh Posté le 27-07-2004 à 11:51:53    

Pour une fois ce n'est pas une question sur la façon d'utiliser les CSS, mais sur la façon de les écrire...
 
J'essaie de ne jamais écrire deux fois la même spécification dans mes CSS. On m'a déjà dit "Evidemment... il est con de dire ça", mais même sur ZenGarden j'ai vu des définitions redondantes à foison.
 
Par exemple, si j'ai plusieurs boîtes fixes qui doivent être alignées sur la même hauteur, la plupart font comme suit :
 

Code :
  1. #bloc1 {
  2.   position: absolute;
  3.   top: 50px;
  4.   left: 0px;
  5.   width: 20px; }
  6. #bloc2 {
  7.   position: absolute;
  8.   top: 50px;
  9.   left: 40px;
  10.   width: 300px; }
  11. #bloc3 {
  12.   position: absolute;
  13.   top: 50px;
  14.   right: 500px;
  15.   width: 100px; }


 
Moi je préfère :

Code :
  1. #bloc1, #bloc2, #bloc3 {
  2.   position: absolute;
  3.   top: 50px; }
  4. #bloc1 {
  5.   left: 0px;
  6.   width: 20px; }
  7. #bloc2 {
  8.   left: 40px;
  9.   width: 300px; }
  10. #bloc3 {
  11.   right: 500px;
  12.   width: 100px; }


 
Comme ça si je ne réécris pas trois fois le position:... et si je veux monter ou descendre mes trois <div>, je suis sûr de ne pas en oublier...
 
Autre exemple, pour un border partiel (disons un même trait dessous et à droite). Au lieu de :

Code :
  1. #borderpartiel {
  2.   border-right:2px solid #FF0000;
  3.   border-bottom:2px solid #FF0000; }


 
Toujours par souci de ne pas spécifier deux fois la même propriété, je préfère :

Code :
  1. #borderpartiel {
  2.   border:2px solid #FF0000;
  3.   border-left-width: 0px;
  4.   border-top-width: 0px; }


 
 
Qu'est-ce que vous en pensez ?


Message édité par ritsar le 27-07-2004 à 11:55:15
Reply

Marsh Posté le 27-07-2004 à 11:51:53   

Reply

Marsh Posté le 27-07-2004 à 11:55:59    

A moins d'avoir une feuille de style gigantesque (et là, il faut se demander si elle en vaut la peine), je préfère dédoubler l'information car cela permet en général d'obtenir une lecture plus aisée du CSS et si l'on désire ne modifier qu'un élément de la page, la manipulation s'en trouve également simplifiée.

Reply

Marsh Posté le 27-07-2004 à 11:56:13    

ritsar a écrit :


Qu'est-ce que vous en pensez ?


 
Ce n'est pas parceque deux informations ont la même valeur qu'il s'agit de la même information.
 


---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
Reply

Marsh Posté le 27-07-2004 à 12:00:47    

gizmo a écrit :

A moins d'avoir une feuille de style gigantesque


 
Ca reste dans la moyenne de ce qui se trouve sur CssZenGarden (mon "canon" ), soit entre 120 et 400 lignes, en comptant les blancs et les commentaires.

Reply

Marsh Posté le 27-07-2004 à 12:03:00    

kadreg a écrit :

Ce n'est pas parceque deux informations ont la même valeur qu'il s'agit de la même information.


 
On est bien d'accord. Mais si tu veux faire des surlignages, des souignages, des encadrements, etc. avec le même style de trait, tu préfères pas le spécifier une seule et unique fois ?

Reply

Marsh Posté le 27-07-2004 à 12:24:01    

kadreg a écrit :

Ce n'est pas parceque deux informations ont la même valeur qu'il s'agit de la même information.


 
Tout à fait d'accord.
Quand les deux infos ne sont pas liées je préfère les dédoublées.
D'un autre côté quand il s'agit d'infos qui sont d'office identiques je les retroupe parfois, mais c'est rare, surtout si seule une partie des infos est commune.


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 27-07-2004 à 12:31:33    

antp a écrit :

Quand les deux infos ne sont pas liées je préfère les dédoublées.


 
OK OK OK
J'ai jamais dit que je regroupe tous les "font-weight:bold" ou les "text-align:left" ensemble.
 
Ce serait crétin, en effet.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed