Produire le style CSS d'un site en équipe est souvent galère. Améliorez ça, en répartissant le code en différentes feuilles conventionnelles, indépendantes et interchangeables.
Cascade et héritage : concevoir, organiser, optimiser…
Méthode CSS modulaire Daisy
1. Méthode Daisy (marguerite)
par Romy Duhem-Verdière
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010
Paris Web 2010 1
2. C 'est le
S uper
S ouk !
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2
5. Adopter un
framework
CSS ?
✔
Trousse de
feuilles de style
✔
Socle multi navigateurs
✔
Classes prêtes à l'emploi
✔
Harmonie graphique
✔
Temps gagné
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 5
6. Adopter un
framework
CSS ?
✔
Temps d'apprentissage
✔
Code externe, inconnu
✔
Non sémantique
✔
Carcan contraignant
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 6
7. Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 7
8. Du général
au particulier
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 8
9. reset
charte typographique
formulaires
rythme, grille
positionnement des
blocs principaux
styles génériques
variantes
par gabarits
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 9
10. reset reset.css
charte typographique typo.css
formulaires
forms.css
rythme, grille
positionnement des grid.css
blocs principaux
layout.css
styles génériques
skin.css
variantes
par gabarits
pages.css
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 10
11. Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 11
12. Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 12
13. Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 13
14. Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 14
15. Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 15
16. en développement en production
styles.css
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 16
17. Merci !
http://romy.tetue.net/methode-daisy
Crédits photo : diapo 2 CC by-nc confidence, comely ; diapo 3 CC by-nc-nd bleu celt ; diapo 4 CC by-sa ARBRE ÉVOLUTION.
Merci à Coopaname, à Sébastien Bloc de Modddjo, à Cyril Marion des Ateliers CYM, à Sophie fONfEk, à Fil et Anne des troglos, à SPIP,
à Hugues Moreno, à Marie Ototoï, aux W3Cafés, à Paris Web et à tous vos retours d'expérience en intégration.
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 17