Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Facile : organiser ses feuilles de style

3,996 views

Published on

Comment garder son code CSS maintenable et organisé ? Dans cette présentation j'ai expliqué ma façon de faire et des outils pour établir une base facilement maintenable avec un code CSS qui devient de plus en plus complexe. Sass, Compass, Modernizr…

Published in: Technology
  • Be the first to comment

CSS Facile : organiser ses feuilles de style

  1. 1. CSS
  2. 2. CSS ? Facile !Pour un code simple, maintenable, et surtout sexy.
  3. 3. Qui je suisJe m’appelle Kaelig depuis 1985Intégrateur @LunaWeb depuis 2007
  4. 4. Je viens de loin
  5. 5. De très très loin…
  6. 6. Aujourd’hui…
  7. 7. CSS3tour d’horizon
  8. 8. border-radius
  9. 9. border-image
  10. 10. css gradients
  11. 11. text-shadow
  12. 12. box-shadow
  13. 13. Couleurs#000 : noirrgba(0, 0, 0, 1) : noirhsl(0, 0, 0) : noirhsla(0, 0, 0, 1) : noir
  14. 14. @font-face Libe!éTypographique
  15. 15. Sélecteurs E::before E::after E:nth-child() E[foo=bar] E#http://www.w3.org/TR/css3-selectors/#selectors
  16. 16. Plus puissantPlus joliPlus complexe
  17. 17. Ce qui nous intéresse : le code CSS
  18. 18. Ce qui nous intéresse : le code CSS
  19. 19. Ce qui nous intéresse : le code CSS t o n éc rit e t la m a n iè re do n n t no t re C S S m a i n t ie
  20. 20. Un projet web Parfois plusieurs intervenants Nombreuses itérations Plusieurs fichiers CSScomplexité = itérations × intervenants × fichiers
  21. 21. Un constat…Chacun code à sa manière .camelCase .dash-lowercase .under_score accolades, indentation…On crée des classes que nous seulscomprenons
  22. 22. Suivre certaines règles Multi Line vs single line formatting L’important est de rester consistant à travers l’intégralité du projet
  23. 23. KISSKeep It Simple … and Sexy
  24. 24. gem install sasshttp://sass-lang.com/
  25. 25. Sélecteurs imbriqués#navbar { #navbar { width: 80%; width: 80%; height: 23px; height: 23px; } #navbar ul { ul { list-style-type: none; } list-style-type: none; } li { #navbar li { float: left; float: left; } a { font-weight: bold; } #navbar li a { } font-weight: bold; }} a {a { color: #ce4dd6; } color: #ce4dd6; a:hover { &:hover { color: #ffb3ff; } color: #ffb3ff; } &:visited { color: #c458cb; } a:visited {} color: #c458cb; }
  26. 26. Variables$main-color: #ce4dd6;$style: solid;#navbar { #navbar { border-bottom: { border-bottom-color: #ce4dd6; color: $main-color; border-bottom-style: solid; } style: $style; } a {} color: #ce4dd6; } a:hover {a { border-bottom: solid 1px; } color: $main-color; &:hover { border-bottom: $style 1px; }}
  27. 27. Fonctions#navbar { #navbar { $navbar-width: 800px; width: 800px; $items: 5; border-bottom: 2px solid #ce4dd6; } $navbar-color: #ce4dd6; #navbar li { float: left; width: $navbar-width; width: 150px; border-bottom: 2px solid $navbar-color; background-color: #e5a0e9; } #navbar li:hover { li { background-color: #d976e0; } float: left; width: $navbar-width/$items - 10px; background-color: lighten($navbar-color, 20%); &:hover { background-color: lighten($navbar-color, 10%); } }}
  28. 28. Étendre un objet Avant Après<div class="error serious-error"> <div class="serious-error"> Oh no! Youve been hacked! Oh no! Youve been hacked!</div> </div>.error { .error { .error, .serious-error { border: 1px #f00; border: 1px #f00; border: 1px #f00; background-color: #fdd; background-color: #fdd; background-color: #fdd; } }} .serious-error { .serious-error {.serious-error { @extend .error; border-width: 3px; border-width: 3px; } border-width: 3px; }}
  29. 29. Conséquencescode plus compréhensiblemieux organisémoins volumineuxplus simple à maintenirmoins d’aspirine
  30. 30. gem install compasshttp://compass-style.org/
  31. 31. box-shadow #box-shadow-default {   @include single-box-shadow; } #box-shadow-custom {   @include box-shadow(red 2px 2px 10px); }#box-shadow-custom-multiple {  @include box-shadow(rgba(blue, 0.4) 0 0 25px, rgba(green, 0.2) 0 0 3px 1px inset); }#box-shadow-custom-multiple { -moz-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset; -webkit-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset; -o-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset; box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;}
  32. 32. CSS3 gradients #linear-gradient {   @include background-image(linear-gradient(left top, white, #dddddd)); } background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd)); background-image: -webkit-linear-gradient(left top, #ffffff, #dddddd); background-image: -moz-linear-gradient(left top, #ffffff, #dddddd); background-image: -o-linear-gradient(left top, #ffffff, #dddddd); background-image: -ms-linear-gradient(left top, #ffffff, #dddddd); background-image: linear-gradient(left top, #ffffff, #dddddd); #svg-gradient {   $experimental-support-for-svg: true;   @include background-image(linear-gradient(left, #2ac363, #cd8c14, #9c4cc2)); } background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhYzM2MyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2Q4YzE0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOWM0Y2MyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #2ac363), color-stop(50%, #cd8c14), color-stop(100%, #9c4cc2)); background-image: -webkit-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); background-image: -moz-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); background-image: -o-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); background-image: -ms-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); background-image: linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
  33. 33. Mais aussitext-shadowtransitionstransformsblueprintplein de helpers cross-browsers…
  34. 34. Et surtout…
  35. 35. Magic sprites • public/images/icon/new.png • public/images/icon/edit.png • public/images/icon/save.png @import "icon/*.png"; • public/images/icon/delete.png @include all-icon-sprites; .icon-sprite, .icon-delete, .icon-edit, .icon-new, .icon-save { background: url(/images/icon-s34fe0604ab.png) no-repeat; } .icon-delete { background-position: 0 0; } .icon-edit { background-position: 0 -32px; } .icon-new { background-position: 0 -64px; } .icon-save { background-position: 0 -96px; }http://compass-style.org/help/tutorials/spriting/
  36. 36. PluginsWordpress960gsBlueprintLess framework320andUpformalize…
  37. 37. Syntaxe et compilation + CSS3, sprites, grilles, plugins…
  38. 38. Avec Sass + Compassla machine écrit le code, pas mes doigtsmoins de bugs cross-browsers+ de temps pour faire sa veille☛ montée en compétences
  39. 39. Comment je les utilise
  40. 40. Un framework modulaire _reset.scss _base.scss _forms.scss _global.scss application.scss _layout.scss @import "base"; @import "reset"; _pages.scss @import "layout"; _typo.scss @import "typo"; @import "forms"; @import "global"; print.scss @import "pages"; Une seule requête HTTP
  41. 41. _base.scssmixinsconstantes (couleurs, font stacks…)helpersplugins
  42. 42. _reset.scss * { margin: 0; padding: 0 } : c’est le mal Eric Meyer Reset CSS 2.0 ou YUI Reset + mes propres règles de resethttp://meyer web.com/eric/tools/css/reset/
  43. 43. _layout.scssGrille (fixe, adaptative, élastique…)Header, footer, sidebar
  44. 44. _typo.scsstailles (helpers .small, .large, .caps)fonts, @font-facelistesheadingscouleurs de texte
  45. 45. _forms.scsschampsboutonscalages et alignementsfieldsets, legends…
  46. 46. _global.scsswidgets (ex : pagination, tabs, …)tout ce qui est réutilisé à travers le site
  47. 47. _pages.scsstout ce qui est spécifique à des pages enparticulieroverrides de styles par défauts pour unepartie du sitesi ce fichier contient trop de règles, j’aipeut être raté quelque chose
  48. 48. OOCSS bien + qu’un framework : une façon d’envisager CSS séparation structure / apparence séparation forme / fondhttps://github.com/stubbornella/oocss/wiki
  49. 49. Exemple simple .btn.btn.btn-primary button.btn a.btn.btn-success input.btn.btn-info div.btn.btn-danger
  50. 50. Pourquoi OOCSS ?forte réutilisation du code CSSHTML plus flexiblemeilleures performances de rendufacile à comprendre par un autreintervenant sur le projet
  51. 51. Debugger sa CSS sous IE Classes IE7, IE8, IE9 sur <html><!--[if IE 7]> <html class="no-js ie7 oldie" lang="fr"> <![endif]--><!--[if IE 8]> <html class="no-js ie8 oldie" lang="fr"> <![endif]--><!--[if IE 9]> <html class="no-js ie9 oldie" lang="fr"> <![endif]--><!--[if gt IE 9]><!--><html class="no-js" lang="fr"><!--<![endif]-->.box { @include box-shadow(rgba(0,0,0,0.3) 0 1px 3px); border: none; .ie7 &, .ie8 & { border: 1px solid #ddd; }}
  52. 52. Progressive enhancement Modernizr.js + Sass.box { border: 1px solid #ddd; .boxshadow & { border: none; @include box-shadow(rgba(0,0,0,0.3) 0 1px 3px); }} http://www.modernizr.com/
  53. 53. Plein de bonnes pratiquesHTML5 Boilerplatehttp://html5boilerplate.com/
  54. 54. En brefJ’écris moins de codeJe recherche constamment un moyend’en écrire encore moinsUn code simple & accessible aux newbiessera plus simple à revisiter par soi-mêmedans 6 moisJe réutilise le code d’un projet à l’autre
  55. 55. Merci !http://kaelig.fr @kaelig

×