<ul><ul><li>Pascale Lambert-Charreteur </li></ul></ul><ul><ul><li>CSS Débutant </li></ul></ul><ul><ul><li>css.mammouthland...
Optimiser ses CSS ?
Un reset ?
<ul><li>*  {  </li></ul><ul><li>padding : 0 ; </li></ul><ul><li>margin : 0 ; </li></ul><ul><li>} </li></ul><ul><li>html, b...
Ou : - Le reset d'Éric Meyer :  http://meyerweb.com/eric/tools/css/reset/ - Le reset de Y! :  http://developer.yahoo.com/y...
L'important est d'obtenir une base de travail cohérente sur chaque navigateur.
YUI propose une approche intéressante : reset + base + font http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-f...
Donner des noms pertinents aux sélecteurs
<ul><li>#gauche { </li></ul><ul><li>} </li></ul><ul><li>#droit { </li></ul><ul><li>} </li></ul><ul><li>#menu { </li></ul><...
Mettre des commentaires
<ul><li>/*  commentaires  */ </li></ul>
Regrouper les sélecteurs
<ul><li>h1  { </li></ul><ul><li>} </li></ul><ul><li>h2  { </li></ul><ul><li>} </li></ul><ul><li>p  { </li></ul><ul><li>} <...
Synthétiser les déclarations
<ul><li>.class   p  { </li></ul><ul><li>font-family :arial, geneva, sans-serif; </li></ul><ul><li>font-size :100%; </li></...
<ul><li>background  : background-color | background-image | background-repeat | background-attachment | background-positio...
Gérer les ordres de priorités
<ul><ul><li><div id= &quot; menu &quot;> </li></ul></ul><ul><ul><li><p> Quelle  <span  class =&quot; couleur &quot;> coule...
<ul><li>La couleur est :  </li></ul><ul><li>rouge </li></ul>
<ul><li>a  : attribut  style </li></ul><ul><li>b  : nombre d' id </li></ul><ul><li>c  : nombre de  class </li></ul><ul><li...
<ul><li>#menu   p   span  { </li></ul><ul><li>color : red; </li></ul><ul><li>} </li></ul><ul><li>[  0   1  0   2  ] </li><...
<ul><li>p span .couleur  { </li></ul><ul><li>color : blue  !important  ; </li></ul><ul><li>} </li></ul><ul><li>Quelle  cou...
Des questions ?
Prochain SlideShare
Chargement dans…5
×

Atelier "Optimiser ses CSS" ParisWeb 2008

3 524 vues

Publié le

Quelques pratiques et astuces pour optimiser ses feuilles de style.
Atelier présenté par Pascale Lambert-Charreteur et Vincent Valentin.

Publié dans : Technologie
  • Soyez le premier à commenter

Atelier "Optimiser ses CSS" ParisWeb 2008

  1. 1. <ul><ul><li>Pascale Lambert-Charreteur </li></ul></ul><ul><ul><li>CSS Débutant </li></ul></ul><ul><ul><li>css.mammouthland.net </li></ul></ul><ul><ul><li>Vincent Valentin </li></ul></ul><ul><ul><li>20cent.net </li></ul></ul>
  2. 2. Optimiser ses CSS ?
  3. 3. Un reset ?
  4. 4. <ul><li>* { </li></ul><ul><li>padding : 0 ; </li></ul><ul><li>margin : 0 ; </li></ul><ul><li>} </li></ul><ul><li>html, body { </li></ul><ul><li>padding : 0 ; </li></ul><ul><li>margin : 0 ; </li></ul><ul><li>} </li></ul>
  5. 5. Ou : - Le reset d'Éric Meyer : http://meyerweb.com/eric/tools/css/reset/ - Le reset de Y! : http://developer.yahoo.com/yui/reset/ - ou un autre !
  6. 6. L'important est d'obtenir une base de travail cohérente sur chaque navigateur.
  7. 7. YUI propose une approche intéressante : reset + base + font http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css
  8. 8. Donner des noms pertinents aux sélecteurs
  9. 9. <ul><li>#gauche { </li></ul><ul><li>} </li></ul><ul><li>#droit { </li></ul><ul><li>} </li></ul><ul><li>#menu { </li></ul><ul><li>} </li></ul><ul><li>#contenu { </li></ul><ul><li>} </li></ul>
  10. 10. Mettre des commentaires
  11. 11. <ul><li>/* commentaires */ </li></ul>
  12. 12. Regrouper les sélecteurs
  13. 13. <ul><li>h1 { </li></ul><ul><li>} </li></ul><ul><li>h2 { </li></ul><ul><li>} </li></ul><ul><li>p { </li></ul><ul><li>} </li></ul><ul><li>/* menu */ </li></ul><ul><li>#menu { </li></ul><ul><li>} </li></ul><ul><li>#menu h2 { </li></ul><ul><li>} </li></ul>
  14. 14. Synthétiser les déclarations
  15. 15. <ul><li>.class p { </li></ul><ul><li>font-family :arial, geneva, sans-serif; </li></ul><ul><li>font-size :100%; </li></ul><ul><li>font-weight :bold; </li></ul><ul><li>line-height :30px; </li></ul><ul><li>} </li></ul><ul><li>.class p { </li></ul><ul><li>font: bold 100%/30px arial, geneva, sans-serif; </li></ul><ul><li>} </li></ul>
  16. 16. <ul><li>background : background-color | background-image | background-repeat | background-attachment | background-position </li></ul><ul><li>border : border-width | border-style | border-color </li></ul><ul><li>font : font-style | font-variant | font-weight | font-size/line-height | font-family </li></ul><ul><li>list-style : list-style-type | list-style-position | list-style-image </li></ul>
  17. 17. Gérer les ordres de priorités
  18. 18. <ul><ul><li><div id= &quot; menu &quot;> </li></ul></ul><ul><ul><li><p> Quelle <span class =&quot; couleur &quot;> couleur </span> ? </p> </li></ul></ul><ul><ul><li></div> </li></ul></ul><ul><li>#menu p span { </li></ul><ul><li>color : red; </li></ul><ul><li>} </li></ul><ul><li>#menu span { </li></ul><ul><li>color : green; </li></ul><ul><li>} </li></ul><ul><li>p span .couleur { </li></ul><ul><li>color : blue; </li></ul><ul><li>} </li></ul>
  19. 19. <ul><li>La couleur est : </li></ul><ul><li>rouge </li></ul>
  20. 20. <ul><li>a : attribut style </li></ul><ul><li>b : nombre d' id </li></ul><ul><li>c : nombre de class </li></ul><ul><li>d : nombre d'éléments html </li></ul><ul><li>[ a b c d ] </li></ul>
  21. 21. <ul><li>#menu p span { </li></ul><ul><li>color : red; </li></ul><ul><li>} </li></ul><ul><li>[ 0 1 0 2 ] </li></ul><ul><li>#menu span { </li></ul><ul><li>color : green; </li></ul><ul><li>} </li></ul><ul><li>[ 0 1 0 1 ] </li></ul><ul><li>p span .couleur { </li></ul><ul><li>color : blue; </li></ul><ul><li>} </li></ul><ul><li>[ 0 0 1 2 ] </li></ul>
  22. 22. <ul><li>p span .couleur { </li></ul><ul><li>color : blue !important ; </li></ul><ul><li>} </li></ul><ul><li>Quelle couleur ? </li></ul>
  23. 23. Des questions ?

×