[résolu] Méthode Ecriture CSS

Bonjour,

1°/ Existe-t-il une méthode ou utilisez-vous une méthode pour organiser vos CSS de manière à vous y retrouver plus facilement ou que les autres s'y retrouve plus facilement.

Exemple pour un sélecteur indiquer :

1. les styles de positionnement
2. les marges
3. les tailles
4. les couleurs, etc...

grosso-modo quelle structure adopter.

2°/

Quelles est la meilleur façon d'écrire les CSS, avec ou sans espace avant, après ou avant et après les ":"

1. - h1 {font-weight:bold;
2. - h1 {font-weight: bold;
3. - h1 {font-weight : bold;

Merci

Vos avis ou liens qui traitent du sujet sont les bienvenus !
Modifié par EricLB (07 Jun 2006 - 14:26)

Salut !
Il n'y a pas de meilleure façon. Il faut privilégier celle qu'on trouve le plus lisible. Moi je préfère la seconde :

1. - h1 {font-weight:bold;
[#orange]2. - h1 {font-weight: bold;[/#]
3. - h1 {font-weight : bold;

Généralement, avec un retour à la ligne après l'accolade ouvrante s'il y a assez de contenu.

Plus globalement, je divise tout ça en plusieurs grandes parties :

* une générale : body, un div#conteneur...
* une dévolue à la navigation (principale, évitements, etc.)
* entête et pied-de-page sont réunis...
* tout ce qui concerne de près ou de loin les formulaires également
* les tableaux sont groupés
* une partie contient tout ce qui gère la mise en page/forme du contenu
* une pour le traitement des images
* le comportement des liens sont au même endroit
* d'autres parties peuvent accueillir d'autres éléments : pour les nouvelles, galeries...

Pour les sélecteurs, s'il y a lieu, je commence souvent par le positionnement, puis l'apparence (polices/couleurs/fonds/etc)...


*********************************************
On peut également parler des divers éléments de séparation :

/* groupe machin */
/*********** [groupe machin] ***********/
/* :::::::::::::::::::::::::::::::::::::::: [groupe machin]
*/
...
Certains préfèrent quelque chose de léger, d'autres de plus visuel...

Reste aussi les noms utilisés : savoir si on préfère menu_gauche à menuGauche, ou à navg... certains raccourcissent au maximum, d'autres les écrivent presque en toute lettre.

Bonjour,
Question je crois que pas mal de mon se pause.
Il y a un articele sur Pompage.net qui traite de cela.
Le cas est variable et assez personnelle en fait.
Il est quand même conseillé de mettre le ";" même a la dernier propriété d'un selecteur.
Ne pas faire l'économie de commentaire pour simplifier la recherches et clarifier la présentation du style.
Trouver la méthode qui te convient le mieux pour choisir un ordre identique dans les déclarations
(moi par ex je commence tjs par le positionement, les marge, bordure, padding, backgrd et puis le reste pour le contenu font...)
Ma logique est de partir de l'exterieur vers l'intérieur donc même si je ne pense pas tout le temps a la respecter.

Tu peux indenter aussi les selecteurs descendant c'est une bonne solution pour clarifier la présentation.

Voila un exemple de présentation:

@charset 'iso-8859-1';
/* ---------------------------------------------------
* CSS pour aspsolution.fr
* version 1.0 - avril 2006
* Auteur : Herman Mendez <mailto:...>
------------------------------------------------------ */
body {
	background: #BCCCCD;
	color: #002C2E;
	font: 62.5% "Trebuchet MS", Verdana, Lucida, Tahoma, sans-serif;
}
#conteneur {
	position: relative;
	width: 1000px;
	border-bottom: 1px solid #589194;
	border-right: 1px solid #589194;
	background: #fff url(../images/bg.gif) repeat-y;
}

/* SELECTEURS COMMUNS
--------------------- */
* {margin:0; padding:0; border:0}
dt, dd, li {list-style: none}


/*----------------------------------- H E A D E R ----------------------------------------*/
#logo {
	margin-top: 15px; 
	margin-left: 15px
	}
/* MENU HAUT
--------------------- */
#menu {
	margin-top: 25px;
	height: 23px;
	background: url(../images/menu_h1_fnd_off.gif) repeat-x;
	font-size: 1.2em; 
	line-height: 23px;
	}
	#menu h2 {
		font-size: 1.1em; 
		}
	#menu h2 a {
		padding: 3px 8px; 
		border-right: 1px solid #479699;
		text-decoration:none; 
		color: #003E41; 
		font-weight:normal
		}
	#menu h2 a:hover {background: url(../images/menu_h1_fnd_on.gif) repeat-x}
	#menu div {float:left;}
	#menu li {float:left;}
	#menu li a {
		padding: 2px 8px; 
		border-right: 1px solid #479699;
		color: #003E41; 
		text-decoration: none; 
	}
	#menu h2 a:hover {background: url(../images/menu_h1_fnd_on.gif) repeat-x}
	#menu li a:hover {background: #E7F2F3}
	#menu ul {height:20px; line-height:20px}

Salut a toi,


moi j'essaye de privilegier le lisible
Mais bon en gros ca donne ca:

* {
    margin:           0; 
    padding:          0;
}
body {
    background:       url("../../_img/bg_01.jpg") top left no-repeat white;
    color:            slategray;
    font:             12pt "bookman old style";
}
.left {
    float:            left;
    margin-left:      .4em; 
}
.right {
    float:            right;
    margin-right:     .4em;       
}
.vingt {
    width:            20%;
}
.orange {
    color:            darkorange !important;
}
a {
    color:            darkred;
    text-decoration:  dotted;   
}

Bonjour,

Je pense que la meilleure méthode, c'est celle ou tu te sens à l'aise. Range selon ta logique, et non celle que d'autres t'imposent. J'ai parfois du mal à décrypter le codage des autres parce qu'il ne suit pas ma logique, mais mon codage me permet de retrouver immédiatement ce que je cherche pasque j'ai pris cette habitude. Le mieux je pense c'est que tu te fixe quelques méthodes de rangement (enfin prend le temps de les tester) et que tu applique toujours celle la ensuite, ca te fera gagner un temps précieux.