[Résolu] Deux déclarations pour un même sélecteur ?

Bonjour à tous,
J'ai récupéré plusieurs free templates css de mise en page, et dans certains d'entre eux j'ai remarqué que le même sélecteur était déclaré deux fois, avec l'utilisation de propriétés différentes.
Exemple :

...
div#container{text-align:left}
...
div#extra{background:#CCC8B3;}
...
div#container{width:700px;margin:0 auto}
...
div#extra{clear:both;width:100%}

Quelle est la raison de cette syntaxe ?
Merci pour vos éclaircissements
Modifié par krakkos (09 Mar 2009 - 13:58)

Hello,

C'est dans la même feuille de styles ?

- text-align = mise en forme,
- width & margin = mise en page.

Ou alors c'est du noobisme, tout simplement.

EDIT :
- background = mise en forme,
- clear & width = mise en page.

Oui, à mon avis c'est plus une question de "confort", pour les mises à jour.
Modifié par BeliG (06 Mar 2009 - 12:59)

Oui, dans l'exemple cité, tout est dans le même fichier .css

Bonjour,

tout comme HTML et CSS permettent de séparer le fond et la forme (et avec le Javascript à part, de séparer le comportement), cela permet de séparer par exemple la mise en page et la typographie.
Ça devient très utile lorsque tu veux modifier toutes les occurences de la couleur bleue: si elles sont regroupées dans un même endroit (section) de ta CSS, ça évite de parcourir toute ta feuille. Ou de séparer en plusieurs fichiers CSS et d'avoir des variantes selon l'heure du jour ou l'annonceur du jour (ex: Dailymotion ou Allociné).
- Vous voulez mon site sur fond noir? Pas de souci je modifie un quart de ma CSS, je vérifie les images de fond et je sais que ça n'impacte pas le reste, même pas la peine de s'en inquiéter.

C'est une méthode utilisée par exemple pour les gabarits de mise en page sur Alsacréations. Voici un exemple:
http://www.alsacreations.com/static/gabarits/styles/modele05.css

Extrait:

/* --- COULEURS --- */

/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
   uniquement les couleurs de fond (propriétés background) et les couleurs
   du texte (propriété color).
   Pour modifier la disposition des blocs, voir plus bas dans la feuille de
   styles la partie «positionnement». */

...

#global {
	color: #F0E39E;
	background: #181A12;
}

...

/* --- POSITIONNEMENT --- */

...

#global {
	width: 100%;
	overflow: hidden;
}

...

Par contre ce genre de chose c'est chiant à maintenir. Je l'ai utilisé ici pour les gabarits pour faciliter les modifications, mais j'évite pour la plupart de mes intégrations web.
Modifié par Florent V. (06 Mar 2009 - 18:35)

Merci pour vos réponses d'usage pratique des CSS