Question sur la "norme" d'écriture css

Bonjour,

Je viens avec une question pas très importante, c'est juste pour la culture

Quelle différence entre ul#contenu et #contenu ul par exemple ? Si c'est la même chose, quelle est la "norme" ou la bonne écriture ?

Comment structurer le code css, qu'est ce qui est le plus utilisé entre :

#contenu {
        padding: 0;
        margin: 0;
}
#contenu ul {
        padding: 0;
        margin: 0;
}

et

#contenu {padding: 0;margin: 0;}
    #contenu ul {padding: 0;margin: 0;}

Plutôt en retrait ou tout en ligne ?

Voila, je vous accorde que ce n'est pas primordial mais je voudrais savoir car j'ai vu les deux types de présentations.

Merci
Modifié par Gimx (04 Mar 2010 - 20:39)

Hello,

Gimx a écrit :
Quelle différence entre ul#contenu et #contenu ul par exemple ?

Ces sélecteurs désignent des éléments complètement différents :
- le 1er désigne l'élément <ul> qui a pour id "contenu"
- le 2è désigne tous les éléments <ul> contenus dans un élément (inconnu) qui a pour id "contenu"

Petit truc : un espace dans un sélecteur désigne forcément une notion de hiérarchie ("est contenu dans").

Donc par exemple :
- ul#contenu désigne un seul élément : le <ul> qui a pour id "contenu"
- ul #contenu désigne un élément inconnu qui a pour id "contenu" et qui a pour ancêtre un <ul>

Salut,
Question des plus pertinente, et réponses très instructive! (va me couché moins niaiseuse à soir!)

Concernant ta 2e question, je pense que c'est surtout une question de préférence. Peut-être de poids aussi.

Pour ma part je fait un mixte des 2. Quand mon élément contient un seul attribut, je mets tout sur la même ligne. Quand il en contient plus d'un, je fais plutôt des retraits pour bien m'y retrouver.

Salut,

en l'occurrence puisque les déclarations sont les mêmes tu aurais pu faire :

#contenu, #contenu ul { 
        padding: 0; 
        margin: 0; 
} 

Personnellement je préfère sauter des lignes et incrémenter pour rendre le code plus lisible. En cas de très grosses CSS il existe des outils (cf. Google) pour compacter le tout avant la mise en ligne.

Sinon : lire les sélecteurs CSS 2.1.

Raphael a écrit :
Hello,



Ces sélecteurs désignent des éléments complètement différents :
- le 1er désigne l'élément <ul> qui a pour id "contenu"
- le 2è désigne tous les éléments <ul> contenus dans un élément (inconnu) qui a pour id "contenu"

Merci pour vos réponses

Raphaël,

Je ne comprends pas l'intérêt de ul#contenu alors...

Sauf si j'ai mal compris, un id est unique tandis que les classes peuvent être réutilisées. Donc pourquoi mettre ul#contenu au lieu de #contenu puisqu'il peut y avoir qu'un id de toute façon ?
Modifié par Gimx (05 Mar 2010 - 01:45)

Gimx a écrit :
Je ne comprends pas l'intérêt de ul#contenu alors...

Sauf si j'ai mal compris, un id est unique tandis que les classes peuvent être réutilisées. Donc pourquoi mettre ul#contenu au lieu de #contenu puisqu'il peut y avoir qu'un id de toute façon ?

Tu as bien compris : un id est unique. Mais cela peut servir à rendre le code plus lisible (on sait que c'est un élément UL qui a cet identifiant) ou pour augmenter une priorité de sélecteur.
Modifié par Heyoan (05 Mar 2010 - 01:53)

Si on veut allier lisibilité et performance d'accès au sélecteur, il vaut mieux utiliser quelque chose comme #ul-contenu {} plutôt que ul#contenu {} : le premier sera plus rapide à traiter par le moteur de rendu des navigateurs qui n'aura pas besoin de rechercher tous les UL pour ensuite retenir celui dont l'id est contenu.

Personnellement je préfère être aussi concis que possible pour mes sélecteurs CSS, sauf besoin spécifique.
Donc j'écris #nav a {} plutôt que ul#nav li a {}, par exemple.

br1o a écrit :
Si on veut allier lisibilité et performance d'accès au sélecteur, il vaut mieux utiliser quelque chose comme #ul-contenu {} plutôt que ul#contenu {} : le premier sera plus rapide à traiter par le moteur de rendu des navigateurs qui n'aura pas besoin de rechercher tous les UL pour ensuite retenir celui dont l'id est contenu.

À ma connaissance, il n'est pas démontré que la performance des sélecteurs CSS ait un impact important sur les performances client. Donc j'évite de sacrifier la lisibilité ou de créer une convention de nommage très particulière (#element-identifiant au lieu de #identifiant) sans preuve qu'on n'est pas dans la sur-optimisation.

br1o a écrit :
Si on veut allier lisibilité et performance d'accès au sélecteur, il vaut mieux utiliser quelque chose comme #ul-contenu {} plutôt que ul#contenu {} : le premier sera plus rapide à traiter par le moteur de rendu des navigateurs qui n'aura pas besoin de rechercher tous les UL pour ensuite retenir celui dont l'id est contenu.

Waouh...
J'ai rien compris.

Gimx a écrit :

#contenu {padding: 0;margin: 0;}
    #contenu ul {padding: 0;margin: 0;}

Plutôt en retrait ou tout en ligne ?

Voila, je vous accorde que ce n'est pas primordial mais je voudrais savoir car j'ai vu les deux types de présentations.

Merci

On avait eu un petit débat sur la question de présentation css. Les commentaires sont très instructifs.

Corinne S. a écrit :

Waouh...
J'ai rien compris.

En fait si j'ai compris :
Par défaut tout le document est parcouru, et tous les <ul> sont repérés. Puis la sélection est faite ensuite en excluant celles qui ne sont pas de l'identifiant souhaité. Alors que dans la solution proposée ça éviterais justement cela. Enfin je pense, car je ne connaissais même pas cette possibilité de sélection.

Florent V. a écrit :
Donc j'évite de sacrifier la lisibilité ou de créer une convention de nommage très particulière (#element-identifiant au lieu de #identifiant) sans preuve qu'on n'est pas dans la sur-optimisation.

Moi aussi. Je le précisais quand même parce qu'avant je pensais que ul#contenu était forcément beaucoup plus rapide que #contenu, ce qui n'est pas évident. Après, je ne connais pas le détail, et il faudrait que je relise la suite de billet d'E. Daspet sur le sujet pour me rafraichir la mémoire : http://performance.survol.fr/avec/selecteur/ et notamment http://performance.survol.fr/2008/05/gains-de-performance-des-selecteurs-css/

Mikachu a écrit :
Par défaut tout le document est parcouru, et tous les <ul> sont repérés. Puis la sélection est faite ensuite en excluant celles qui ne sont pas de l'identifiant souhaité. Alors que dans la solution proposée ça éviterais justement cela. Enfin je pense, car je ne connaissais même pas cette possibilité de sélection.

A moins de n'avoir pas compris non plus il s'agit bien de cela... sauf qu'il ne s'agit pas d'un sélecteur particulier mais de nommer l'id en rajoutant le nom de l'élément (pas menu mais ul_menu).

Eh ben... Je vois que ma question que je trouvais "sans importance" a fait un petit débat. J'ai appris pas mal de choses notamment sur la relation notation-performance. Très instructif tous ces liens

Merci