Ordonner son CSS

Vous allez être amené à créer des lignes dans votre CSS. Si vous désirez les retrouver et connaître rapidement leur signification, il faut y mettre de l'ordre.

Pour exemple, un extrait de mon CSS. Ce n'est pas le CSS type, c'est seulement pour vous expliquer le principe dans ses grandes lignes.

Les informations placées entre /*...XXX...*/// vous sont destinées. Elles ne signifient rien en langage informatique.

Vous constatez que le CSS est ordonné : les données concernant l'ensemble du blog en haut, celles concernant les différentes parties du blog ensuite.

/* ------------ Elements Principaux ------------------- */
body    {  margin:0px; margin-bottom:0px;font-family: Verdana, Helvetica, Arial, sans-serif;  font-size:x-small ; background: url(http://fdata.over-blog.com/0/37/17/67/thumbs/css/rock022.jpg);
cursor:URL(http://ddata.over-blog.com/xxxyyy/0/37/17/67/curseurs/annak.cur ), default;  }

/* ------------------------- Structure ---------------------- */
/* Pour les stuctures avec 2 colonnes */
#ln_1 {} /*totalité*/
#ln_1 #cl_1_0 colonne principale */

Pour ranger mon CSS, j'essaye de respecter un ordre visuel : l'entête est en haut du blog. Je mets donc les informations la concernant au début du CSS. Le bas de page étant son pendant, je les mets ensemble.

/*--------------------- entete ------------------------------*/
#top    { padding:0px;margin-left:0px; margin-right:0px;margin-top:0px; margin-bottom:-40px;  }
#top h1 { padding:0px; margin:0px; }

/*---------------------- Bas de page ------------------------*/
#footer   { clear:both; color: #333;margin-bottom:-10px;}
#footer p { margin:0px; padding: 10px;}

/* ------------------------ Box ---------------------------- */
/* correspond au block des modules */
.box             {  width:100%; margin-bottom:0px; margin-top:5px;  }
.box h2          {  text-align:center; color:#330033;background-color: beige; }
.box-content     {overflow:auto; padding:0px 10px 10px 5px; color:#330033;}
.box-content p   { margin:5px 0px 5px 15px; padding:0px; }
.box-content ul  { margin:5px 0px 5px 15px; padding:0px; }
.box-content li  { list-style:disc; color: #330033; margin:0px; padding:0px;}
.box-content a {font-weight:normal; color:#330033;text-decoration:none;}
.box-content a:hover { }

Je mets toutes les informations relatives aux articles à la suite les unes des autres

/* ------------------------ Articles ---------------------- */
.article    { color:#330033; padding-top:5px;background: beige;padding-right:-5px;padding-left:0px;margin-top:5px; border:1px solid #330033; line-height: 1.7em;cursor:URL(http://chezpasglop.ifrance.com/cur/baguette01.cur)), default; }
.article h2 {}
.article p  { padding:0px 0px 10px 10px; margin:0px; }
.article a { text-decoration : none;  }
.article a:hover { background-image:URL(http://up.mezimages.com/up/10/1245642barre48.gif);}
.date  { width:100%; margin-right:10px; color: #330033;text-align:center;font-size: 9pt;font-weight:bold; margin-top:10px; }
.Option { padding:10px 0px 0px 0px; margin:5px 0px 5px 0px; border-top:0px solid #9999FF; width:100%; text-align:right; font-size:85%;}
.barreHautArticle {padding:0px 0px 5px 0px; margin:0px; border-bottom:ridge 2px #330033; }

/*-------------------- Titre de l'article------------- */
.titreArticle{color:#330033;font-size:130%;text-decoration : none; }
.titreArticle:hover {}
.divTitreArticle {text-align:center;margin-top:10px;  }
.divTitreArticle a{border-bottom:0px dotted #330033; }

/*--------------------Liste des articles----------- */
.listArticles { margin-top:0px; margin-bottom:10px;  background: url(http://fdata.over-blog.com/0/37/17/67/thumbs/css/thumb-revmur006.jpg);border: ridge 2px #330033; color:#996666;}
.listArticles a {color:#330033;}
.resumeArticle { border-top:2px solid #F4F4F4;color:#993366;background-color:beige;  }

/*-----Numéro des pages dans Catégorie et Liste des articles- */
.pagination { }
.pagination a {}
.divPagination center{}
.divPagination center a {}

/*--------------------Article seul----------- */
#articleSeul {} /*style d'un article lors de l'affichage de l'article ou de ses commentaires/trackbacks*/
.GcheTexte{float:left; margin:5px;}
.DrteTexte{float:right; margin:5px; }
.CtreTexte{margin:3px auto; display:block;}
.hitcitation {font-style:italic;text-align:justify;padding:5px 20px;background-color:#eee; }
.hitencart {border: ridge 1px #330033;font-weight:bold;margin-right:10px;margin-left:15px;padding:10px ; background: url(http://fdata.over-blog.com/0/37/17/67/thumbs/css/thumb-revmur006.jpg);}
.hitimportant {font-weight:bold;color:red;font-weight:bold;font-size:120%;}
.hitperso1 {}
.hitperso2 {font-weight:bold;}

L'accueil étant voisin, sur le blog, des articles, je le mets ici. Pourquoi pas au-dessus ? Parce que l'accueil est un article : certaines informations notées dans le pavé consacré aux articles sont utilisées par l'accueil.

/*------------------- Accueil ----------------------------------*/
#articleAccueil .divTitreArticle { font-size:150%;}
#articleAccueil h2{color:beige;  }
#articleAccueil { background-image:URL(http://www.hiboox.com/images/3906/e65b30d.jpg);}

Maintenant, toutes les informations concernant le bas de l'article et les commentaires.

/*-------------------- Publié par... dans (catégorie)------------- */
.categorieArticle {  }  /*categorie de l'article*/
.categorieArticle a {text-transform:lowercase;}
.optionInfo {  }

/*--Ajouter un commentaire - Commentaire - Recommander--------- */
.optionLink,.spanliencom,.spanlientrack,.spanlienrecom,.spanaddcomment {float:none; }
.optionLink a,.spanliencom a,.spanlientrack a,.spanlienrecom a,.spanaddcomment a {border-bottom:0px dotted #330033;}

/*-------Commentaires et réponses sous les articles----------- */
.h2commentMessage {color: beige;  font-size:20px;} 
.comment    {  }
.comment hr { }
.linkcomment {font-size: 120%;font-weight:bold;color:beige;text-align:center;  }
.linkcomment0 {  }

Toutes les informations concernant les modules

/*--------------------Module Articles récents------------------ */.
.ArticleRecent h2 {font-size:120%;   }
.ArticleRecent { }
.ArticleRecent a{font-weight:bold;  }

Toutes les informations concernant les fenêtres.

/*--------------------Fenêtre Commentaires----------------------- */
#formComment h2 {text-align:center; font-size:17px;color:beige;  }
#formComment  { }

/*-------------------Clic droit--------------------------------*/
#menuClicDroit {position:absolute;top:0px;left:0px;z-index:500;visibility:hidden;background-color:#FFFFFF;border:1px solid #808080;padding:3px;}
#menuClicDroit li { list-style-type:none; margin:0px; padding:0px; color:red; }
#menuClicDroit ul{margin:0px;padding:0px;}
#menuClicDroit ul span {display:block; margin:5px 0px 2px 0px;}

Et tout à la fin du CSS, la partie rajout : un menu, un post-it, un 3ème module...

/*-------------------R A J O U T S--------------------------------*/

/*-------------------Post-it--------------------------------*/
#postit { position: absolute; top: 175px; left: 400px; z-index: 300; width: 221px; height:200px; background-color:beige; font-family: comic sans ms; font-size: 14px; font-weight: normal; color: #000; font-style: italic;text-align: left; line-height:20px;  margin: 0;padding: 0;border: ridge 2px #330033; }
#postit p { padding:0 10px 0 10px; padding:10px 10px 0 10px;}

#close { position: absolute; bottom: 5px; right: 10px; font-size:10px; font-family: verdana; font-style: normal; color: black; padding: 5px 20px 5px 0; background:#CCCCCC no-repeat center right; }