davidbgk
/
larlet-fr-david
Beobachten 1
Favorisieren 0
Fork 0
Code Releases 0 Aktivität
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
109 Commits
1 Branch
Struktur: 85085f76fa
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „85085f76fa“
${ noResults }
larlet-fr-david/david/biologeek/archives/20070522-des-css-de-qualite/index.html

index.html 31KB
Originalformat Blame Verlauf

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414 
  1. <!doctype html>

  2. <html lang=fr>

  3. <head>

  4.   <!-- Always define the charset before the title -->

  5.   <meta charset=utf-8>

  6.   <title>★ Des CSS de qualité — Biologeek — David Larlet</title>

  7.   <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->

  8.   <meta name="viewport" content="width=device-width, initial-scale=1"/>

  9.   <!-- Fake favicon, to avoid extra request to the server -->

  10.   <link rel="icon" href="data:;base64,iVBORw0KGgo=">

  11.   <link type="application/atom+xml" rel="alternate" title="Feed" href="/david/log/" />

  12.   <link rel="manifest" href="/manifest.json">

  13.   

  14.   <link rel="stylesheet" href="/static/david/css/larlet-david-_J6Rv.css" data-instant-track />

  15.   

  16.   <noscript>

  17.     <style type="text/css">

  18.       /* Otherwise fonts are loaded by JS for faster initial rendering. See scripts at the bottom. */

  19.       body {

  20.         font-family: 'EquityTextB', serif;

  21.       }

  22.       h1, h2, h3, h4, h5, h6, time, nav a, nav a:link, nav a:visited {

  23.         font-family: 'EquityCapsB', sans-serif;

  24.         font-variant: normal;

  25.       }

  26.     </style>

  27.   </noscript>

  28.   

  29.   <!-- Canonical URL for SEO purposes -->

  30.   <link rel="canonical" href="https://larlet.fr/david/biologeek/archives/20070522-des-css-de-qualite">

  31. 

  32. </head>

  33. <body>

  34.   <div>

  35.     

  36.     <header>

  37.       <nav>

  38.         <p>

  39.           <small>

  40.             Je suis <a href="/david/" title="Profil public">David Larlet</a>, <a href="/david/pro/" title="Activité professionnelle">artisan</a> du web qui vous <a href="/david/pro/accompagnement/" title="Activité d’accompagnement">accompagne</a><span class="more-infos"> dans l’acquisition de savoirs pour concevoir des <a href="/david/pro/produits-essentiels/" title="Qu’est-ce qu’un produit essentiel ?">produits essentiels</a></span>. <span class="more-more-infos">Discutons ensemble d’une <a href="/david/pro/devis/" title="En savoir plus">non-demande de devis</a>.</span> Je partage ici mes <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et <a href="/david/correspondances/2017/" title="Lettres hebdomadaires">correspondances</a>.

  41.           </small>

  42.         </p>

  43.       </nav>

  44.     </header>

  45.     

  46.     

  47.   <section>

  48.     <h1 property="schema:name">★ Des CSS de qualité</h1>

  49.     <article typeof="schema:BlogPosting">

  50.       <div property="schema:articleBody">

  51.         <img src="/static/david/biologeek/images/logos/css_qualite.png" alt="vignette" style="float:left; margin: 0.5em 1em;" property="schema:thumbnailUrl" />

  52.         <p>Je dois écrire ce billet depuis tellement de temps que ça doit se compter en années. Je profite d'avoir lu l'excellent livre «&nbsp;<a href="http://www.editions-eyrolles.com/Livre/9782212119763/css-2-pratique-du-design-web"><abbr title="Cascading Style Sheets">CSS</abbr> 2 Pratique du web design</a> » de <a href="http://www.alsacreations.com/">Raphaël Goetter</a> pour faire coup double avec une critique et un peu de contenu dans la foulée.</p>

  53. 

  54. <h2>Critique du livre</h2>

  55. 

  56. <p>Difficile de trouver quelque chose à redire de cet ouvrage. Tout y est, ou plutôt&nbsp;: <strong>tout ce qui mérite d'y être y est</strong>. L'auteur ne tombe pas dans le piège qui consisterait à répertorier l'ensemble des hacks connus et c'est une excellente chose, on vit bien mieux sans. L'enchaînement des chapitres est cohérent, le style est clair et concis (on sent l'habitude d'écrire pour le web) et l'exemple que l'on suit tout au long de l'ouvrage est un véritable atout pour sa vitalité.</p>

  57. 

  58. <p>Ce qui m'a surtout plu dans ce livre, c'est l'<strong>approche à la fois didactique et militante</strong> sans pour autant porter un jugement sur les navigateurs obsolètes. L'auteur est convaincu et fait passer sa conviction à travers cet ouvrage et dans un tel domaine c'est important, c'est ainsi que les standards progressent doucement mais sûrement&nbsp;: par l'éducation. J'ai retrouvé dans ces pages le parfait reflet de la <a href="http://css.alsacreations.com/">communauté AlsacreationS</a> et de son dynamisme. Pour couronner le tout, il y a même un <a href="http://www.alsacreations.com/livre/">site consacrée au livre</a>.</p>

  59. 

  60. <p>Il n'y a que les annexes qui m'ont un peu déçu car ce sont des ressources que l'on manipule bien mieux en ligne et je doute de leur utilité en format imprimé (il est rare de faire ou d'apprendre les CSS en étant déconnecté). Dommage qu'il n'y ait pas eu aussi plus de contenu relatif à Internet Explorer 7 car c'est ce que j'attendais de la seconde édition mais bon à force d'être sur <a href="http://planet.inertie.org/">#openweb</a> je deviens peut-être un peu trop exigeant aussi :-).</p>

  61. 

  62. <h2>Des CSS de qualité</h2>

  63. 

  64. <p>L'idée d'un tel billet est partie du constat qu'il existait énormément de <a href="http://www.ultra-fluide.com/ressources/css/css-hacks.htm">ressources</a> <a href="http://www.webdevout.net/css-hacks">listant</a> <a href="http://orderedlist.com/articles/clearing-floats-the-fne-method">les hacks</a> <a href="http://css-discuss.incutio.com/?page=CssHack">les plus connus</a> mais très peu faisant référence aux bonnes pratiques ou aux règles d'organisation pour «&nbsp;coder » en CSS. Je vais tenter ici de regrouper celles que j'utilise le plus souvent, vous pouvez les utiliser ou pas, ce sont juste mes indicateurs de qualité personnels.</p>

  65. 

  66. <h3>Un modèle pour gagner du temps</h3>

  67. 

  68. <p>Les designs se suivent et se ressemblent bien souvent (au niveau des CSS en tout cas).</p>

  69. 

  70. <ul>

  71. <li><strong>Remise à zéro</strong>&nbsp;: il existe <a href="http://kurafire.net/log/archive/2005/07/26/starting-css-revisited">tout</a> <a href="http://developer.yahoo.com/yui/reset/">un tas</a> de <strong>reset.css</strong>, la dernière en date est probablement <a href="http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/">celle d'Eric Meyer</a> que j'utilise maintenant. C'est un peu bourrin car il faut vraiment tout redéfinir mais la qualité a un prix :-)&nbsp;;</li>

  72. <li><strong>Hacks usuels</strong>&nbsp;: même s'il faut essayer de les éviter au maximum en raison des effets de bord et de la pérennité du travail réalisé, il y en a <a href="http://www.positioniseverything.net/easyclearing.html">certains</a> qui <a href="http://www.svendtofte.com/code/max_width_in_ie/">reviennent</a> <a href="http://tantek.com/CSS/Examples/boxmodelhack.html">fréquemment</a> et il est toujours bon de les avoir sous la main&nbsp;;</li>

  73. <li><strong>Layout général</strong>&nbsp;: les sites de layouts pullulent, <a href="http://blog.html.it/layoutgala/">LayoutGala</a> est pas trop mal pour ça, tout dépend de vos besoins.</li>

  74. </ul>

  75. 

  76. <h3>S'organiser pour s'y retrouver</h3>

  77. 

  78. <p>Un fichier CSS peut devenir très long, marre de scroller à tout va&nbsp;?</p>

  79. 

  80. <ul>

  81. <li><strong>Indentation, vers des CSS pythoniques</strong>&nbsp;: rassurez-vous j'utilisais cette technique avant de faire du python&nbsp;! Je pense que le plus simple est de jeter un œil à la CSS de l'exemple concret ci-dessous, il s'agit d'indenter le code pour chaque niveau de la cascade (ou presque)&nbsp;;</li>

  82. <li><strong>Agencement et lisibilité</strong>&nbsp;: ici je n'ai pas vraiment de conseil à donner car ça dépend bien souvent de votre éditeur et donc probablement de l'alignement de Mars et Pluton. Certains recommandent de faire un menu ou de placer des raccourcis pour accéder rapidement aux différentes parties mais avec le précédent conseil vous n'en aurez normalement pas besoin puisque seuls les conteneurs seront sur la gauche et formeront donc des raccourcis sans ajout de commentaires superflus&nbsp;;</li>

  83. <li><strong>Fichiers séparés... ou pas</strong>&nbsp;: tout dépend de la taille du projet mais je suis de moins en moins persuadé du bien fondé d'avoir une CSS différente pour le layout, la typographie, etc. À la limite avoir une CSS différente pour une partie du site qui est peu visitée et qui demande beaucoup de styles mais sinon c'est plus une contrainte qu'autre chose et ça demande de constamment passer d'un fichier à un autre ce qui est pénible (sans compter les performances au téléchargement).</li>

  84. </ul>

  85. 

  86. <h3>Pérennité et documentation</h3>

  87. 

  88. <p>Si vous travaillez à plusieurs sur un gros projet, ces conseils sont vraiment importants.</p>

  89. 

  90. <ul>

  91. <li><strong>Styleguide et template&nbsp;: le duo gagnant</strong>&nbsp;: je n'arrive plus à trouver le lien original sur la définition d'un styleguide en CSS mais concrètement ça <a href="http://www.kevo.com/styleGuide.html">ressemble à ça</a>, il s'agit de rassembler sur une même page tout les éléments utilisés et d'afficher leur style. C'est bien différent du template qui est généralement représentatif du layout du site et qui ne contient pas forcément tous les éléments stylés&nbsp;;</li>

  92. <li><strong>Documentation, pensez aux autres !</strong>&nbsp;: vous venez de passer <del>une</del> deux heures sur un bug <abbr title="Internet Explorer">IE</abbr> récalcitrant et vous remarquez sa réapparition quelques jours plus tard... n'allez pas frapper votre collègues, documentez vos bugfix ou mieux&nbsp;: faites des tests&nbsp;;</li>

  93. <li><strong>Des tests pour les cas critiques</strong>&nbsp;: faites une page (comme pour le styleguide ou le template) pour chaque bug qui seront autant de tests unitaires à valider après chaque modification du code CSS, c'est rarement fait mais ça peut faire gagner un temps énorme (et des nuits blanches après des modifications en prod ;-)).</li>

  94. </ul>

  95. 

  96. <h3>Optimisations finales</h3>

  97. 

  98. <p>Prêt à mettre en ligne&nbsp;? Il est temps d'optimiser.</p>

  99. 

  100. <ul>

  101. <li><strong>Utilisez les propriétés générales</strong>&nbsp;: utilisez font, padding, margin et non font-family, margin-left, padding-bottom par exemple, c'est assez <a href="http://www.sitepoint.com/article/introduction-css-shorthand">bien documenté</a> <a href="http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/">ailleurs</a>&nbsp;;</li>

  102. <li><strong>Utilisez la cascade</strong>&nbsp;: c'est ce que l'on oublie bien souvent lorsque l'on a la tête dans le guidon mais il est souvent possible avec du recul d'optimiser la structure et donc sa mise en forme en les simplifiant, en enlevant les <strong>class</strong> ou les <strong>div</strong> inutiles. Vous pouvez aussi appliquer des propriétés générales à des éléments d'un niveau supérieur pour éviter les répétitions&nbsp;;</li>

  103. <li><strong>Compressez tout ça</strong>&nbsp;: le navigateur ne voit pas la différence mais l'utilisateur oui en téléchargeant plus rapidement la feuille de style alors pourquoi s'en priver&nbsp;? Il existe de nombreux outils qui sont heureusement <a href="http://www.bloggingpro.com/archives/2006/08/17/css-optimization/">comparés sur cette page</a>. J'utilise généralement <a href="http://www.cleancss.com/">CleanCSS</a> car <a href="http://iceyboard.no-ip.org/projects/css_compressor">CSS Compressor</a> m'enlève bien souvent trop de styles (n'oubliez pas de tester à nouveau vos pages après la compression !) et puis CleanCSS dit ce qu'il fait donc vous pouvez corriger les problèmes à la source  ce qui est tout de même plus pratique.</li>

  104. </ul>

  105. 

  106. <h2>Exemple concret</h2>

  107. 

  108. <p>Celle de ce site commence à dater ce qui ne convenait pas en guise d'exemple. J'ai donc décidé à cette occasion de refaire mon CV que j'ai intitulé pompeusement «&nbsp;<a href="http://david.larlet.fr/">Profil (CV) de David Larlet, concepteur d'applications web</a> », je voulais qu'il ait <strong>un contenu plus proche de ce que je fais, de ce que je suis</strong>, un peu moins formel aussi et puis <a href="http://silent-strength.com/">xethorn</a> m'a fait remarqué que l'ancien faisait pâle figure alors ça a aussi été l'occasion de le restyler.</p>

  109. 

  110. <p>J'ai pour cela utiliser l'ancien style de <a href="http://www.bartelme.at/">bartelme.at</a> qui a été mis sous <abbr title="General Public License">GPL</abbr> (?) et adapté pour en faire <a href="http://www.ilemoned.com/wordpress/wptheme-dark/">un thème WordPress</a>. Je pensais pouvoir repartir de cette base mais l'auteur souffrait un peu trop de la divite et de la classite pour que ça convienne à un exemple. J'ai donc repris certains des conseils donnés ci-dessus pour concevoir <a href="http://media.larlet.fr/david/css/style.css">la css en question</a> (version non compressée). <strong>J'ai essayé de la rendre aussi claire que possible pour que vous puissiez facilement identifier les astuces</strong> et les gains qu'elles peuvent procurer.</p>

  111. 

  112. <p>Pour finir, je ne pense pas qu'il y ait de meilleure conclusion que celle du livre&nbsp;:</p>

  113. 

  114. <blockquote><p>N'oubliez pas que l'emploi de styles CSS n'est qu'une partie d'un tout&nbsp;: à quoi bon rechercher les avantages de CSS et de la séparation entre contenu et mise en forme si c'est pour ignorer d'autres principes fondamentaux des bonnes pratiques&nbsp;: propreté du code, sémantique et bon usage des balises, intuitivité de la navigation, conception aux normes.</p>

  115. <p>

  116. En somme, développer un site web respectant les normes et les bonnes pratiques n'a rien d'obligatoire&nbsp;; <strong>c'est juste essentiel</strong>.</p></blockquote>

  117. 

  118. <h3>Ressources</h3>

  119. 

  120. <p>Bon même en limitant les liens ça en fait pas mal... en voici encore quelques uns qu'il ne faut pas louper&nbsp;:</p>

  121. 

  122. <ul>

  123. <li><a href="http://leftjustified.net/site-in-an-hour/">Site in an hour</a> (présentation d'une qualité exceptionnelle)</li>

  124. <li><a href="http://www.456bereastreet.com/archive/200610/useful_tips_for_writing_efficient_css/">Useful tips for writing efficient CSS</a></li>

  125. <li><a href="http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml">Ten CSS tricks you may not know</a></li>

  126. <li><a href="http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml">Ten more CSS tricks you may not know</a></li>

  127. <li><a href="http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/">70 Expert Ideas For Better CSS Coding</a></li>

  128. </ul>

  129. 

  130. <p>En attendant peut-être un jour <a href="http://www.contentwithstyle.co.uk/Articles/17/a-css-framework/">un véritable</a> <a href="http://www.wymstyle.org/fr/">framework CSS</a> <a href="http://www.yaml.de/" hreflang="de">digne de ce nom</a>...</p>

  131.       </div>

  132.     </article>

  133.     <footer>

  134.       <h6 property="schema:datePublished">— 22/05/2007</h6>

  135.     </footer>

  136.   </section>

  137.   <section>

  138.     <div>

  139.       <h3>Articles peut-être en rapport</h3>

  140.       <ul>

  141.         <li><a href="/david/biologeek/archives/20080723-ipheedsorg-une-version-iphone-pour-votre-blog/" title="Accès à ★ iPheeds.org, une version iPhone pour votre blog">★ iPheeds.org, une version iPhone pour votre blog</a></li>

  142.         <li><a href="/david/biologeek/archives/20080613-artiste-qui-sommeille-en-chaque-geek/" title="Accès à ★ L&#39;artiste qui sommeille en chaque geek">★ L&#39;artiste qui sommeille en chaque geek</a></li>

  143.         <li><a href="/david/biologeek/archives/20080211-astuces-et-bonnes-pratiques-django/" title="Accès à ★ Astuces et bonnes pratiques Django">★ Astuces et bonnes pratiques Django</a></li>

  144.       </ul>

  145.     </div>

  146.   </section>

  147.   <section>

  148.     <div id="comments">

  149.       <h3>Commentaires</h3>

  150.       

  151. <div class="comment" typeof="schema:UserComments">

  152.     <p class="comment-meta">

  153.         <span class="comment-author" property="schema:creator">Pierre</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :

  154.     </p>

  155.     <div class="comment-content" property="schema:commentText">

  156.         <p>Encore une fois, un article clair et concis fourmillant de liens... j'adore !<br />

  157. <br />

  158. J'ai encore appris des trucs, merci beaucoup ;)</p>

  159.     </div>

  160. </div>

  161. <div class="comment" typeof="schema:UserComments">

  162.     <p class="comment-meta">

  163.         <span class="comment-author" property="schema:creator">NiCoS</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :

  164.     </p>

  165.     <div class="comment-content" property="schema:commentText">

  166.         <p>+1 :-)<br />

  167. <br />

  168. Que ferait-on sans David... ;-P</p>

  169.     </div>

  170. </div>

  171. <div class="comment" typeof="schema:UserComments">

  172.     <p class="comment-meta">

  173.         <span class="comment-author" property="schema:creator">David</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :

  174.     </p>

  175.     <div class="comment-content" property="schema:commentText">

  176.         <p>Quel coïncidence !<br />

  177. <br />

  178. 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 />

  179. <br />

  180. 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 />

  181. <br />

  182. Les grands esprits pythoniques se rencontrent... !<br />

  183. </p>

  184.     </div>

  185. </div>

  186. <div class="comment" typeof="schema:UserComments">

  187.     <p class="comment-meta">

  188.         <span class="comment-author" property="schema:creator">olivier G.</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :

  189.     </p>

  190.     <div class="comment-content" property="schema:commentText">

  191.         <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 />

  192. <br />

  193. 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>

  194.     </div>

  195. </div>

  196. <div class="comment" typeof="schema:UserComments">

  197.     <p class="comment-meta">

  198.         <span class="comment-author" property="schema:creator">Daniel R</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :

  199.     </p>

  200.     <div class="comment-content" property="schema:commentText">

  201.         <p>Salut, David<br />

  202. <br />

  203. 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 />

  204. <br />

  205. Un framework CSS digne de ce nom ? <br />

  206. 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 />

  207. <br />

  208. Cependant, je pense de plus en plus que le framework CSS 'ultime' <br />

  209. 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 />

  210. <br />

  211. 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 />

  212. <br />

  213. J'ai réussi à avoir quelques essais concluants, c'est de la pré-pré-pré alpha, mais le potentiel est bien là :-)<br />

  214. Je posterai quelques exemples sur mon blog quand j'aurai suffisamment  progressé.</p>

  215.     </div>

  216. </div>

  217. <div class="comment" typeof="schema:UserComments">

  218.     <p class="comment-meta">

  219.         <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :

  220.     </p>

  221.     <div class="comment-content" property="schema:commentText">

  222.         <p>@Pierre et NiCoS : mais c'est un plaisir :-)<br />

  223. <br />

  224. @David : ça doit être la saison, c'est pas la première de la semaine !<br />

  225. <br />

  226. @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 />

  227. <br />

  228. @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 />

  229. <br />

  230. 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 />

  231. </p>

  232.     </div>

  233. </div>

  234. <div class="comment" typeof="schema:UserComments">

  235.     <p class="comment-meta">

  236.         <span class="comment-author" property="schema:creator">Olivier G.</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :

  237.     </p>

  238.     <div class="comment-content" property="schema:commentText">

  239.         <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 />

  240. <br />

  241. 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>

  242.     </div>

  243. </div>

  244. <div class="comment" typeof="schema:UserComments">

  245.     <p class="comment-meta">

  246.         <span class="comment-author" property="schema:creator">Kagou</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :

  247.     </p>

  248.     <div class="comment-content" property="schema:commentText">

  249.         <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 />

  250. Que de lectures en vue, et qui tombent au bon moment en plus pour moi ;)<br />

  251. <br />

  252. Merci !</p>

  253.     </div>

  254. </div>

  255. <div class="comment" typeof="schema:UserComments">

  256.     <p class="comment-meta">

  257.         <span class="comment-author" property="schema:creator">oakleaf</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :

  258.     </p>

  259.     <div class="comment-content" property="schema:commentText">

  260.         <p>Merci :)</p>

  261.     </div>

  262. </div>

  263. <div class="comment" typeof="schema:UserComments">

  264.     <p class="comment-meta">

  265.         <span class="comment-author" property="schema:creator">jp.fox</span> le <span class="comment-date" property="schema:commentTime">22/05/2007</span> :

  266.     </p>

  267.     <div class="comment-content" property="schema:commentText">

  268.         <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 />

  269. </p>

  270.     </div>

  271. </div>

  272. <div class="comment" typeof="schema:UserComments">

  273.     <p class="comment-meta">

  274.         <span class="comment-author" property="schema:creator">Nicofrand</span> le <span class="comment-date" property="schema:commentTime">23/05/2007</span> :

  275.     </p>

  276.     <div class="comment-content" property="schema:commentText">

  277.         <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>

  278.     </div>

  279. </div>

  280. <div class="comment" typeof="schema:UserComments">

  281.     <p class="comment-meta">

  282.         <span class="comment-author" property="schema:creator">Saigon</span> le <span class="comment-date" property="schema:commentTime">23/05/2007</span> :

  283.     </p>

  284.     <div class="comment-content" property="schema:commentText">

  285.         <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>

  286.     </div>

  287. </div>

  288. <div class="comment" typeof="schema:UserComments">

  289.     <p class="comment-meta">

  290.         <span class="comment-author" property="schema:creator">css4design</span> le <span class="comment-date" property="schema:commentTime">24/05/2007</span> :

  291.     </p>

  292.     <div class="comment-content" property="schema:commentText">

  293.         <!-- TB -->

  294. <p><strong>Organiser ses feuilles de style CSS</strong></p>

  295. <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

  296. 

  297. 

  298. 

  299. Après quelques recherches, certaines</p>

  300.     </div>

  301. </div>

  302. <div class="comment" typeof="schema:UserComments">

  303.     <p class="comment-meta">

  304.         <span class="comment-author" property="schema:creator">Raphael</span> le <span class="comment-date" property="schema:commentTime">24/05/2007</span> :

  305.     </p>

  306.     <div class="comment-content" property="schema:commentText">

  307.         <p>Merci David pour cette critique plutôt positive, mais aussi et surtout pour l'article détaillé qui la complète.<br />

  308. <br />

  309. 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 />

  310. <br />

  311. Pour le reste, rien à redire !<br />

  312. <br />

  313. 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>

  314.     </div>

  315. </div>

  316. <div class="comment" typeof="schema:UserComments">

  317.     <p class="comment-meta">

  318.         <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">24/05/2007</span> :

  319.     </p>

  320.     <div class="comment-content" property="schema:commentText">

  321.         <p>@Saigon : ça c'est du commentaire :')<br />

  322. <br />

  323. @Raphael : mais merci à toi pour ce livre !<br />

  324. <br />

  325. 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>

  326.     </div>

  327. </div>

  328. <div class="comment" typeof="schema:UserComments">

  329.     <p class="comment-meta">

  330.         <span class="comment-author" property="schema:creator">GandalfoS</span> le <span class="comment-date" property="schema:commentTime">25/05/2007</span> :

  331.     </p>

  332.     <div class="comment-content" property="schema:commentText">

  333.         <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>

  334.     </div>

  335. </div>

  336. <div class="comment" typeof="schema:UserComments">

  337.     <p class="comment-meta">

  338.         <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">31/05/2007</span> :

  339.     </p>

  340.     <div class="comment-content" property="schema:commentText">

  341.         <p>Il y a parfois des commentaires qui laissent sans voix :-)</p>

  342.     </div>

  343. </div>

  344. <div class="comment" typeof="schema:UserComments">

  345.     <p class="comment-meta">

  346.         <span class="comment-author" property="schema:creator">Tybho</span> le <span class="comment-date" property="schema:commentTime">07/07/2007</span> :

  347.     </p>

  348.     <div class="comment-content" property="schema:commentText">

  349.         <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>

  350.     </div>

  351. </div>

  352. <div class="comment" typeof="schema:UserComments">

  353.     <p class="comment-meta">

  354.         <span class="comment-author" property="schema:creator">Olivier Poète</span> le <span class="comment-date" property="schema:commentTime">14/06/2008</span> :

  355.     </p>

  356.     <div class="comment-content" property="schema:commentText">

  357.         <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>

  358.     </div>

  359. </div>

  360. <div class="comment" typeof="schema:UserComments">

  361.     <p class="comment-meta">

  362.         <span class="comment-author" property="schema:creator">Pascale</span> le <span class="comment-date" property="schema:commentTime">31/10/2008</span> :

  363.     </p>

  364.     <div class="comment-content" property="schema:commentText">

  365.         <p>Excellent merci beaucoup pour toutes ces infos :-)</p>

  366.     </div>

  367. </div>

  368. <div class="comment" typeof="schema:UserComments">

  369.     <p class="comment-meta">

  370.         <span class="comment-author" property="schema:creator">Chat</span> le <span class="comment-date" property="schema:commentTime">24/08/2009</span> :

  371.     </p>

  372.     <div class="comment-content" property="schema:commentText">

  373.         <p>Je recherchais justement à en savoir plus sur le css2 merci.</p>

  374.     </div>

  375. </div>

  376. <div class="comment" typeof="schema:UserComments">

  377.     <p class="comment-meta">

  378.         <span class="comment-author" property="schema:creator">Riche</span> le <span class="comment-date" property="schema:commentTime">15/09/2010</span> :

  379.     </p>

  380.     <div class="comment-content" property="schema:commentText">

  381.         <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>

  382.     </div>

  383. </div>

  384. <div class="comment" typeof="schema:UserComments">

  385.     <p class="comment-meta">

  386.         <span class="comment-author" property="schema:creator">Download 5DFly Photo Design</span> le <span class="comment-date" property="schema:commentTime">20/09/2010</span> :

  387.     </p>

  388.     <div class="comment-content" property="schema:commentText">

  389.         <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>

  390.     </div>

  391. </div>

  392. 

  393.     </div>

  394.   </section>

  395. 

  396.     

  397.     <footer>

  398.       <nav>

  399.         <p>

  400.           <small>

  401.             Je réponds quasiment toujours aux <a href="m&#x61;ilto:d&#x61;vid%40l&#x61;rlet&#46;fr" title="Envoyer un email">emails</a> (<a href="/david/signature/" title="Ma signature actuelle avec possibilité de chiffrement">signés</a>) et vous pouvez me rencontrer à Montréal. <span class="more-infos">N’hésitez pas à <a href="/david/log/" title="Être tenu informé des mises à jour">vous abonner</a> pour être tenu informé des publications récentes.</span>

  402.           </small>

  403.         </p>

  404.       </nav>

  405.     </footer>

  406.     

  407.   </div>

  408.   

  409.   <script src="/static/david/js/larlet-david-3ee43f.js" data-no-instant></script>

  410.   

  411.   <script data-no-instant>InstantClick.init()</script>

  412.   

  413. </body>

  414. </html>