Après la présentation du script PNGHack, voici une nouvelle présentation de Yves Van Goethem concernant l’organisation et l’optimisation de nos chères feuilles de style CSS : application des conventions de développement à l’écriture des CSS ; structuration des CSS selon la complexité des documents à styler et pour terminer, une bonne dose de bonnes pratiques !
HTML & CSS
CSS — Structurer, documenter et maintenir
C’est toujours intéressant de voir les conventions des autres développeurs. Mais là, il manque sérieusement des explications du pourquoi du comment.
Je trouve que le mode impératif employé aurait mérité d’être accompagné de « c’est mieux parce que… » notamment pour les « Class génériques intrusives » par exemple, pour faire avancer un peu plus les choses.
@Cyril Lopez : c’était une présentation orale tout n’est pas détaillé par écrit, mais pour répondre à ta question : faire un class= »clear » ou un style= »clear:both » est exactement pareil d’un point de vue maintenabilité, ça revient à mélanger la présentation et le contenu.
Cette présentation est fort intéressante. Je cherche toujours ceci dit, une convention rédigée par l’organisation de référence. Peut être cela existe déjà ?
Ceci dit, une chose fait cruellement défaut dans cette présentation, l’optimisation du poid des fichiers css, elle compte beauoup dans le poid du document html et il ne faut pas la négliger dans la convention de dev. pour ma part pour ce qui concerne les commentaires, je les fais toujours sur une ligne et sans mettre trop d’espaces non plus.
exemple
/*mon commentaire*/
et pas
/********************************* mon commentaire ******************************/
Sinon bravo pour vos efforts, c’est toujours très compliqué de faire des choses simples et qui soient compréhensibles par le plus grand nombre.
@Yves Van Goethem : Merci de ta précision
@Nicolas G : J’aurai du parler de la séparation d’environnement, mes propositions de conventions touchent la phase de développement, tu peux minifier et ainsi supprimer tout commentaire et tout white-space une fois en production.
C’est bien, mais j’attends toujours une norme plus définitive. La quantité de fautes d’orthographe ne m’aide pas à accorder une grande valeur à ce guide.
@Cyril Lopez: @Yves Van Goethem: concernant le mélange entre la présentation et le contenu, j’ai un avis plus nuancé. Si un
class="clear"est une intrusion, alors, à l’extrême, tout ajout de classe CSS dans le HTML l’est aussi ^^Par exemple, je fais un usage immodéré des
float: leftavec leur cortège de.clearfix:after {}, declear: both, d’overflow: hidden, voire même declass="clear"… Bref, dans pas mal de cas, je me retrouverai avec beaucoup plus de lignes si je n’utilisais pas quelques classes « Utilitaires » pour mettre rapidement en forme mes documents (sans aller jusqu’à la mise en place d’un framework, ni même d’un mini-framework, même si la tentation est grande !).@Bernard Ouellet: La valeur du guide d’Yves, c’est dans l’usage et la pratique qu’elle se révèlera (elle en jette, cette phrase 😉 ). Même s’il reste deux ou trois trucs qu’on peut approfondir (reset, notamment), l’essentiel n’est pas dans l’orthographe…
Intéressant, je suis pas d’accord partout pas contre.
Autant tout mettre dans un fichier css se défends, autant le contraire aussi. Sur des gros projets, j’ai besoin de structurer mon code sur plusieurs fichier, c’est beaucoup plus simple de s’y retrouver par la suite. Et si on fais les choses proprement il n’y a pas de problème de surcharge.
J’ai fais un petit guide des bonnes pratiques au sein de ma boite, je le relirai avec cette présentation sous les yeux pour comparer.
@Bruno Bichet : clearfix, spacer, floatLeft, … ce sont des class qui vont purement définir la présentation de manière à sens-unique, floatLeft ne pourra jamais devenir floatRight, clear, ne pourra jamais céder sa place à un float, autant que colorRed ne deviendra jamais colorBlue, sans modification dans le document.
Bref faire class= »floatLeft » revient à faire style= »float:left; »
Toute class n’est pas réellement intrusive, ce sont des identifiants qui vont permettre de faire le travail de présentation en CSS, qui pourra évoluer et changer entièrement d’un document à l’autre, sans pour autant devoir modifier ce dernier, ce qui n’est pas le cas pour un class= »floatLeft »
@clem : j’aimerai beaucoup jetter un oeil à ton guide
Perfecto. Merci, monsieur.