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…

1. CSS

2. CSS ? Facile !
Pour un code simple, maintenable, et surtout sexy.

3. Qui je suis
Je m’appelle Kaelig depuis 1985
Intégrateur @LunaWeb depuis 2007

4. Je viens de loin

5. De très très loin…

6. Aujourd’hui…

7. CSS3
tour d’horizon

8. border-radius

9. border-image

10. css gradients

11. text-shadow

12. box-shadow

13. Couleurs
#000 : noir
rgba(0, 0, 0, 1) : noir
hsl(0, 0, 0) : noir
hsla(0, 0, 0, 1) : noir

14. @font-face
Libe!é
Typographique

15. Sélecteurs
E::before
E::after
E:nth-child()
E[foo=bar]
E#
http://www.w3.org/TR/css3-selectors/#selectors

16. Plus puissant
Plus joli
Plus complexe

17. Ce qui nous intéresse :
le code CSS

18. Ce qui nous intéresse :
le code CSS

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

21. Un projet web
Parfois plusieurs intervenants
Nombreuses itérations
Plusieurs fichiers CSS
complexité = itérations × intervenants × fichiers

22. Un constat…
Chacun code à sa manière
.camelCase
.dash-lowercase
.under_score
accolades, indentation…
On crée des classes que nous seuls
comprenons

23. Suivre certaines règles
Multi Line vs single line formatting
L’important est de rester consistant à
travers l’intégralité du projet

24. KISS
Keep It Simple
…
and Sexy

25. gem install sass
http://sass-lang.com/

26. 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; }

27. 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;
}
}

28. 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%);
}
}
}

29. Étendre un objet
Avant Après
<div class="error serious-error"> <div class="serious-error">
Oh no! You've been hacked! Oh no! You've 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;
}
}

30. Conséquences
code plus compréhensible
mieux organisé
moins volumineux
plus simple à maintenir
moins d’aspirine

31. gem install compass
http://compass-style.org/

32. 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;
}

33. 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+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOWM
0Y2MyIi8+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);

34. Mais aussi
text-shadow
transitions
transforms
blueprint
plein de helpers cross-browsers
…

35. Et surtout…

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

37. Plugins
Wordpress
960gs
Blueprint
Less framework
320andUp
formalize
…

38. Syntaxe et compilation
+
CSS3, sprites, grilles, plugins…

39. Avec Sass + Compass
la machine écrit le code, pas mes doigts
moins de bugs cross-browsers
+ de temps pour faire sa veille
☛ montée en compétences

40. Comment je les utilise

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

42. _base.scss
mixins
constantes (couleurs, font stacks…)
helpers
plugins

43. _reset.scss
* { margin: 0; padding: 0 } : c’est le mal
Eric Meyer Reset CSS 2.0 ou YUI Reset
+ mes propres règles de reset
http://meyer web.com/eric/tools/css/reset/

44. _layout.scss
Grille (fixe, adaptative, élastique…)
Header, footer, sidebar

45. _typo.scss
tailles (helpers .small, .large, .caps)
fonts, @font-face
listes
headings
couleurs de texte

46. _forms.scss
champs
boutons
calages et alignements
fieldsets, legends…

47. _global.scss
widgets (ex : pagination, tabs, …)
tout ce qui est réutilisé à travers le site

48. _pages.scss
tout ce qui est spécifique à des pages en
particulier
overrides de styles par défauts pour une
partie du site
si ce fichier contient trop de règles, j’ai
peut être raté quelque chose

49. OOCSS
bien + qu’un framework : une façon
d’envisager CSS
séparation structure / apparence
séparation forme / fond
https://github.com/stubbornella/oocss/wiki

50. Exemple simple
.btn
.btn.btn-primary button.btn a.btn.btn-success
input.btn.btn-info div.btn.btn-danger

51. Pourquoi OOCSS ?
forte réutilisation du code CSS
HTML plus flexible
meilleures performances de rendu
facile à comprendre par un autre
intervenant sur le projet

52. 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;
}
}

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

54. Plein de bonnes
pratiques
HTML5 Boilerplate
http://html5boilerplate.com/

55. En bref
J’écris moins de code
Je recherche constamment un moyen
d’en écrire encore moins
Un code simple & accessible aux newbies
sera plus simple à revisiter par soi-même
dans 6 mois
Je réutilise le code d’un projet à l’autre

56. Merci !
http://kaelig.fr @kaelig