Un petit débat qui anime quelques collègues et moi en ce moment…
* #content-block ou .content-block
* #content\_block ou .content\_block
* #contentblock ou .contentblock
* #contentBlock ou .contentBlock
Moi je préfère la première notation… Et vous ? Et surtout : pourquoi ?
Pour info, on a trouvé ça sur le Web (via Ced) :
* http://www.phpied.com/css-coding-conventions/
* http://www.brownbatterystudios.com/sixthings/2006/11/21/forming-effective-css-classes-ids/
Autre chose, même si je ne veux pas vous influencer, les gourous du Web (Jeffrey Zeldman, Eric Meyer, Shaun Inman, Douglas Bowman, Molly E. Holzschlag, Dave Shea, Tristan Nitot, etc.) semblent alterner entre la première et la troisième notation.
PS : n’empêche, quand je vois le temps qu’on a passé à discuter à ce propos (et ce n’est pas fini), je commence à comprendre combien il doit être difficile de former un gouvernement pour un pays…
Le blog de Vincent Battaglia 
le balisage entre # ou . est simple et la règle est de la sémantique qui peut être vérifiée au validateur W3C : dans une page web ouverte et fermée par la balise HTML, il ne peut y avoir qu’un “id” avec le même nom. Par contre le balisage avec plusiuers “class” identique est tout à fait permis.
Exemple :
<ul id="menu"> <li class="level1">élément de niveau 1</li> <li class="level1">élément de niveau 1</li> <li class="level1">élément de niveau 1</li> </ul>Il n’y a qu’un menu mais avec plusieurs éléments de niveau 1
Pour le reste, le 1er article est assez intéressant pour les préférence de codage, je me sens assez proche de l’auteur 😉
LikeLike
hé shit j’ai pas quoté mon HTML d’exemple, Vinch, faudra le rééditer, sorry 😉
LikeLike
Dans le nommage XML j’utilise le tiret – mais dans le CSS je prend plutôt le souligné _ et donc la 2ème solution. Il faut garder à l’esprit que pour le référencement, il est préférable d’utiliser des identificateurs sémentiques et de ce point de vue tu as tout à fait raison de choisir la 1ère solution (à noter que “contenu-block” est n’est pas très sémentique).
Mais je reste quand même dans le doute, je me pose la question entre le 1er et le 2ème. C’est peut-être dû au fait qu’en language de programmation “contenu-block” c’est faire la soustraction de 2 variables et donc par habitude, je nomme avec le souligne _ 🙂
Si il y a une réponse à cette question, j’aimerai bien la conaître.
LikeLike
arf 🙂
Comme je te le disais par mail, voici pourquoi je ne préconise pas l’usage du – (tiret)
“1) ex: .first-letter:first-child {}
Vraiment perturbant pour un non initié.
2) Toutes les propriétés css sont séparées par des tirets-> lors d’un parcours rapide à l’oeil, avec des séparateurs tirets, on ne peut pas directement identifier propriétés et selecteurs!
3) Quand tu fais du JavaScript, pour une liste d’element avec id, ils sont souvent nommés “blabla-0”, “blabla-1″, blabla-3” pour etre manipulés via JS.
C’est vraiment plus simple de faire document.getElementsByTagName(‘li’)[0].split(‘-‘)[1] que document.getElementsByTagName(‘li’)[0].split(‘-‘)[document.getElementsByTagName(‘li’)[0].split(‘-‘).length-1]
4) Si tu fais du “name dropping”, il faut aller plus loin et voir les sites qui sont vraiment édités par plusieurs personnes (enfin j’imagine):
BBC: il y a un mix de css qui emploient et le camelCase et les tirets
WSJ emploie soit le camelCase soit le lowercase
FaceBook emploie des noms séparés par des underscore
WordPress.com emploie un mix de tout
CSSZenGarden emploie le camelCase
etc etc
Anyway, ce n’est pas telle ou telle convention d’écriture qui compte, c’est surtout qu’il y en ait une (pour paraphraser je ne sais plus qui).
LikeLike
Moi je dis que du moment que tout le monde utilise la même chose, on s’en fout. Les 4 versions sont à peu de choses près aussi lisibles.
LikeLike
j’ai tendance à utiliser le tiret parce que je trouve que c’est plus lisible, mais c’est parfois pénible à sélectionner avec le double-clic en fonction de l’éditeur, donc je me mets doucement au camelCase.
Sinon, je pense – comme marin – que l’important est de respecter une convention !
Contrairement à Ced, je ne pense pas que les 4 versions présentent la même lisibilité.
Après il faut juger en fonction des situations comme #sidebar-content-info-general vs #sidebarContentInfoGeneral : dans ce cas, je trouve le camelCase plus lisible.
Après, il faut aussi voir s’il est judicieux d’utiliser plusieurs termes au lieu d’un seul ou si l’on utilise plusieurs termes pourquoi ne pas commencer par le plus significatif dans le contexte comme #generalInfoContentSidebar histoire de repérer les subdivisioon plus rapidement au sein du code.
LikeLike
Perso, j’utilise le camel case (la quatrieme solution donc). On utilise ça on garde un cohérence entre les conventions de nommage entrer JavaScript et Css (ainsi qu’en python puisque nos backend sont en python)
Je trouve que les tirets sont à éviter, pour que l’on voit mieux les différences entre les propriétés (et sélecteurs) et les noms de classes ou d’id…
Mais tout ça n’est qu’un débat phylosophique 🙂
LikeLike
Underscore pour le CSS et attaché avec majuscule pour les noms de class, fonctions et variables php
LikeLike
Et toi Vinch, pourquoi la première notation?
LikeLike
Exactement comme Emerika ^^
Je trouve les underscore pratique pour le split(), lisibles, et j’aime pas les tirets, sans bonne raison d’ailleurs…
LikeLike
Habitué au développement Java, j’opte pour la 4ème ligne, juste par habitude de nommage
LikeLike
Je crois que j’utilise plus souvent la solution 3, mais lorsque cela devient long, alors, c’est la 1.
LikeLike
J’opte pour la 2è et la 4è ligne.
La 4è par habitude du JavaScript et je l’utilise plus pour nommer des ID et la 2è plus pour les class…
Et comme Pierre, je ne sais pas pourquoi je préfère l’underscore au tiret. Sûrement un reste d’habitude de nommage sous MS-DOS… 😛
LikeLike
Perso j’utilise le camelCase, mais je me rends compte que jsuis pas assez strict là-dessus et que je fais pas toujours la même chose dans mes nommages 😀
LikeLike
Comme antoine, j’aime bien le camel , mais chui pas assez rigoureux… ca va devoir changer 😉
LikeLike
De manière général et un peu pour tout (css, php, …) >> camelCase.
Pourquoi ? C’est à la mode :p
LikeLike
16 A la mode ? Je ne crois pas non, ca fait longtemps a mon avis que c’est utilisé 😉
Mieux pour les selections et pour les autres raisons citées ci-dessus le camelCase est pour moi le meilleur choix?
LikeLike
Je n’utilise que le camelCase en ce qui me concerne. C’est ce que je préfère parce que ça reste compact et lisible.
LikeLike