larlet-fr-david/david/biologeek/archives/20070522-des-css-de-qualite/comments.html

<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Pierre</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Encore une fois, un article clair et concis fourmillant de liens... j'adore !<br />
<br />
J'ai encore appris des trucs, merci beaucoup ;)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">NiCoS</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>+1 :-)<br />
<br />
Que ferait-on sans David... ;-P</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Quel coïncidence !<br />
<br />
Vendredi je me suis dis qu'il me faudrai un bouquin sur les CSS. Il y avait un article sur &quot;Zen des CSS&quot; dans Biologeek, mais ça ne semblait pas me correspondre. Finalement un ami chef de projet multimédia me conseille le bouquin d'Alsacréation. Je le commande ce matin.<br />
<br />
Puis je vais faire un tour sur mon netvibes et là tu viens me confirmer dans mon choix : il y a des jours ce site est un Graal pour moi ;-) !<br />
<br />
Les grands esprits pythoniques se rencontrent... !<br />
</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">olivier G.</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Une autre bonne pratique consiste à trier les propriétés CSS dans l'ordre alphabétique, ça permet de les retrouver plus facilement.<br />
<br />
Personnelement, je surindente en plus les 5 propriétés qui dépendent du positionnement (et je ne peux pas faire d'exemple, les espace de début de ligne sont retirés par dotclear).</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Daniel R</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Salut, David<br />
<br />
lecteur régulier de ton blog, ça me fait bien plaisir de te voir mentionner WYMstyle, surtout quand je vois l'intitulé de ton article :)<br />
<br />
Un framework CSS digne de ce nom ? <br />
J'utilise déjà la 0.2 de WYMstyle depuis plus de 1 an, pour de nombreux sites en production, ce qui me permet de gagner un temps considérable, et d'avoir un code bien plus facile à gérer et à réutililser d'un projet à l'autre. Mais c'est vrai que WYMstyle, tout comme les autres frameworks il me semble, tent à enfermer le designer dans 'sa' logique. Il est souvent plus facile pour des layouts moins conventionnels de repartir à 0, et de se passer de frameworks.<br />
<br />
Cependant, je pense de plus en plus que le framework CSS 'ultime' <br />
doit avoir une couche logique de programmation (pour l'instant j'ai commencé à travailler sur une solution XML+XSL+PHP) qui permet de générer des layouts CSS complets et optimisés (fichiers CSS + XHTML) de manière vraiment simple et efficace.<br />
<br />
On pourrait de cette manière générer des layouts XHTML+CSS vraiment sur mesure (jusqu'aux noms des id et class), intégrant par défaut une série de bonne pratiques (contrôle de l'ordre de la source, ...) et immédiatement compatibles tous browsers... <br />
<br />
J'ai réussi à avoir quelques essais concluants, c'est de la pré-pré-pré alpha, mais le potentiel est bien là :-)<br />
Je posterai quelques exemples sur mon blog quand j'aurai suffisamment  progressé.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@Pierre et NiCoS : mais c'est un plaisir :-)<br />
<br />
@David : ça doit être la saison, c'est pas la première de la semaine !<br />
<br />
@Olivier G. : beaucoup conseillent en effet de lister les propriétés dans un ordre prédéfini mais je n'ai jamais un bloc qui dépasse les 10 lignes donc j'ai du mal à en voir l'intérêt. Après ça doit être une question d'habitude mais tant que je l'ai facilement dans mon champ visuel ça me suffit.<br />
<br />
@Daniel R. : merci pour ton commentaire (et heureux de te compter parmi mes lecteurs !) qui fait le point détaillé sur l'état de WYMstyle, pour être honnête je n'ai pas encore testé la solution actuelle mais je l'ai cité car il y a de l'idée et apparemment des idées tu en as encore ! Je ne peux que t'encourager à avancer sur ta nouvelle version bien que je mette un bémol sur le fait d'avoir un framework qui ne soit pas langage-agnostique...<br />
<br />
C'est marrant car hier je me demandais justement si je ne pourrais pas automatiser la compression de la CSS car c'est une tâche assez fastidieuse... peut-être en js ?<br />
</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Olivier G.</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Ah tiens, une bonne habitude liée aux commentaires conditionnels et aux feuilles de styles spécifiques à IE qu'ils permettent : lorsque je surchage une valeur CSS dans la feuille IE, je l'indique dans la feuille générale par un /* !IE */ (ou /* !IE6 */ si ce n'est que dans la feuille de style pour IE 6).<br />
<br />
Quand à l'ordre des valeurs, ça permet de savoir que si mon objet a une bordure, la règle CSS sera forcément en début de bloc. En fin de journée, on gagne beaucoup de temps...</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Kagou</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Encore un superbe article qui fait bien le point. J'ai découvert la css de remise à zéro de Eric Meyer, chose que je faisais naturellement mais franchement pas aussi bien.<br />
Que de lectures en vue, et qui tombent au bon moment en plus pour moi ;)<br />
<br />
Merci !</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">oakleaf</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Merci :)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">jp.fox</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Merci David pour cet article excellent. Voici de bonnes bases pour quelqu'un comme moi qui voulait entrer un peu plus dans le vif du sujet et arrêter de &quot;bidouiller&quot; du CSS.<br />
</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Nicofrand</span> le <span class="comment-date" property="schema:commentTime">23/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Je ne connaissais pas CleanCSS , très utile pour vérifier merci du lien! D'ailleurs certains autres liens m'étaient également inconnus alors que très pratiques! </p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Saigon</span> le <span class="comment-date" property="schema:commentTime">23/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Très bon article...un des meilleurs blog que j'ai pu lire jusqu'à présent....et comme pour certain je ne connaissais pas le morceau de css pour remettre à zéro :)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">css4design</span> le <span class="comment-date" property="schema:commentTime">24/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <!-- TB -->
<p><strong>Organiser ses feuilles de style CSS</strong></p>
<p>J'ai regardé l'organisation des CSS  dans de nombreux CMS, de Dotclear à WordPress en passant par des plate-formes de e-commerce. Il n'y a pas deux feuilles de style qui partagent la même organisation



Après quelques recherches, certaines</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Raphael</span> le <span class="comment-date" property="schema:commentTime">24/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Merci David pour cette critique plutôt positive, mais aussi et surtout pour l'article détaillé qui la complète.<br />
<br />
Il y'a beaucoup de bonnes pratiques à suivre dans ton billet, même si je ne suis vraiment pas partisan du fameux reset CSS : plutôt que de tout mettre à zéro puis de redéfinir chacun des éléments qui le nécessitent (forcément), je préfère me limiter à définir une fois pour toutes ce dont j'ai besoin... avec quelques exceptions comme les ul et les form, qui sont souvent avantageusement &quot;resetées&quot;.<br />
<br />
Pour le reste, rien à redire !<br />
<br />
PS : tiens, j'ai cru voir (commentaire n°3) une hérésie : un &quot;alsacréationS&quot; sans &quot;s&quot; final :D</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">24/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@Saigon : ça c'est du commentaire :')<br />
<br />
@Raphael : mais merci à toi pour ce livre !<br />
<br />
Concernant le reset, c'est vrai qu'il est pénible de devoir redéfinir chaque propriété comme strong ou sup mais sinon on finit toujours par oublier qu'un élément a telle propriété par défaut dans tel navigateur et c'est pour ça que je l'utilise. Après tout dépend de la complexité du site aussi... par exemple là pour un CV c'est un peu disproportionné à mon avis.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">GandalfoS</span> le <span class="comment-date" property="schema:commentTime">25/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Et dire que j'ai osé te donner un cours de XHTML/CSS ... c'est toi qui aurait du le faire ce cours :)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">31/05/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Il y a parfois des commentaires qui laissent sans voix :-)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Tybho</span> le <span class="comment-date" property="schema:commentTime">07/07/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Je tombe bien, un article concernant la pratique du reset CSS a justement été publié il y a quelques jours : <a href="http://blog.alsacreations.com/2007/07/02/369-reset-css-une-technique-a-manier-avec-precaution" title="http://blog.alsacreations.com/2007/07/02/369-reset-css-une-technique-a-manier-avec-precaution" rel="nofollow">blog.alsacreations.com/20...</a></p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Olivier Poète</span> le <span class="comment-date" property="schema:commentTime">14/06/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Ce livre CSS2 est vraiment bien pour apprendre le CSS en plus du site AlsacréationS.<br />Merci Tybho pour le lien de l&#39;article juste au-dessus qui est intéressant.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Pascale</span> le <span class="comment-date" property="schema:commentTime">31/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Excellent merci beaucoup pour toutes ces infos :-)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Chat</span> le <span class="comment-date" property="schema:commentTime">24/08/2009</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Je recherchais justement à en savoir plus sur le css2 merci.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Riche</span> le <span class="comment-date" property="schema:commentTime">15/09/2010</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Merci, moi qui voulait foncer tête baissé dans le CSS3, je vais peut être commencer par bien comprendre le CSS tout court héhé^^</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Download 5DFly Photo Design</span> le <span class="comment-date" property="schema:commentTime">20/09/2010</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p> et c&#39;est pour ça que je l&#39;utilise. Après tout dépend de la complexité du site aussi... par exemple là pour un CV c&#39;est un peu disproportionné à mon avis.</p>
    </div>
</div>