Yet Another Css Talk?? WTF!

Un altro, l’ennesimo, talk su css, per presentare l’approccio object oriented proposto da Nicole Sullivan e, soprattutto, ricordarci che css non è un figlio minore, ma un tassello fondamentale dei siti e delle applicazioni web che stiamo sviluppando

From The Front, Frontend Invaders (Modena, November 18th, 2010)
@cedmax
http://cedmax.com

Transcript

1. Yet Another Css Talk?? WTF! by Marco Cedaro http:/ /cedmax.net @cedmax domenica 2 ottobre 11
2. Perchè un altro talk su css? domenica 2 ottobre 11
3. Naturale reazione a un talk css domenica 2 ottobre 11
4. I programmatori lo snobbano ..o non lo conoscono e farebbero tutto a tabelle.. ..e noi siamo impegnati solo a montare i layout domenica 2 ottobre 11
5. e il business? il css viene dato per scontato viene lasciato a consulenti, stagisti o alle burbe perchè si pensa non possano fare gran danni “perchè il css è facile” ...ed è per questo che è difficile trovare chi sa farlo bene. jquery anyone? domenica 2 ottobre 11
6. e invece... il css è il primo errore a cui l’utente fa caso è fondamentale nei tempi di caricamento del browser i tempi di manutenzione sono incredibili domenica 2 ottobre 11
7. Think Outside the Brackets domenica 2 ottobre 11
8. Css Structure ul { ... } ul li { ... } ul li a { ... } domenica 2 ottobre 11
9. Css Structure ul { ... } ul li { ... } ul li a { ... } domenica 2 ottobre 11
10. Css Structure ul { ... } ul li { ... } ul li a { ... } Cross Browser e Hack domenica 2 ottobre 11
11. Css Structure ul { ... } ul li { ... } ul li a { ... } Cross Browser e Hack Ordine delle Proprietà domenica 2 ottobre 11
12. Css Structure ul { ... } ul li { ... } ul li a { ... } Cross Browser e Hack Ordine delle Proprietà Css3 domenica 2 ottobre 11
13. Css Structure ul { ... } ul li { ... } ul li a { ... } Cross Browser e Hack Ordine delle Proprietà Css3 Proprietà proprietarie domenica 2 ottobre 11
14. Css Structure ul { ... } ul li { ... } ul li a { ... } domenica 2 ottobre 11
15. Css Structure ul { ... } ul li { ... } ul li a { ... } domenica 2 ottobre 11
16. Css Structure ul { ... } ul li { ... } ul li a { ... } Document Architecture domenica 2 ottobre 11
17. Object Oriented Css domenica 2 ottobre 11
18. Cos’è OOCss un framework? un tool? una filosofia? domenica 2 ottobre 11
19. Cos’è OOCss un framework? un tool? una filosofia? un approccio archietturale domenica 2 ottobre 11
20. Cos’è OOCss un framework? un tool? una filosofia? un approccio archietturale Nicole Sullivan Performance Engineer @ Yahoo domenica 2 ottobre 11
21. pensate a una funzione Javascript che a seconda di dove viene richiamata ritorni cose diverse domenica 2 ottobre 11
22. pensate a una classe Css che a seconda di dove viene utilizzata renderizzi stili diversi domenica 2 ottobre 11
23. L’obiettivo è creare “oggetti” (blocchi di codice html e css) che si comportino prevedibilmente indipendentemente dalla posizione nella pagina. = codice riutilizzabile meno codice ( = migliori performance & minore manutenzione) domenica 2 ottobre 11
24. I principi Separazione di struttura e skin Separazione di contenitore e contenuto domenica 2 ottobre 11
25. Struttura != Skin domenica 2 ottobre 11
26. e il business? la skin viene lasciata a consulenti, stagisti o alle burbe i senior in house mi fanno le strutture BRAVONE! domenica 2 ottobre 11
27. Contenitore != Contenuto domenica 2 ottobre 11
28. Contenitore != Contenuto domenica 2 ottobre 11
29. Real Life Example domenica 2 ottobre 11
30. domenica 2 ottobre 11
31. TADA! domenica 2 ottobre 11
32. Come si ottiene tutto questo? domenica 2 ottobre 11
33. Come si ottiene tutto questo? ci sono varie linee guida che potete trovare sulle slide di Nicole Sullivan o sul suo sito. domenica 2 ottobre 11
34. Come si ottiene tutto questo? ci sono varie linee guida che potete trovare sulle slide di Nicole Sullivan o sul suo sito. ragionare gli oggetti come dei lego per costruire il proprio sito domenica 2 ottobre 11
35. Come si ottiene tutto questo? ci sono varie linee guida che potete trovare sulle slide di Nicole Sullivan o sul suo sito. ragionare gli oggetti come dei lego per costruire il proprio sito usare css reset e grid system domenica 2 ottobre 11
36. Come si ottiene tutto questo? ci sono varie linee guida che potete trovare sulle slide di Nicole Sullivan o sul suo sito. ragionare gli oggetti come dei lego per costruire il proprio sito usare css reset e grid system utilizzare classi multiple per estendere i propri moduli domenica 2 ottobre 11
37. Come si ottiene tutto questo? ci sono varie linee guida che potete trovare sulle slide di Nicole Sullivan o sul suo sito. ragionare gli oggetti come dei lego per costruire il proprio sito usare css reset e grid system utilizzare classi multiple per estendere i propri moduli non overridare stili no ID, no!important e per quanto è possibile no hack domenica 2 ottobre 11
38. e il business? è contento! domenica 2 ottobre 11
39. What else? domenica 2 ottobre 11
40. “If you're still building websites without {Less}, you're an idiot” http:/ /incident57.com/less/ domenica 2 ottobre 11
41. less estende css preprocessa un file .less e genera un css (runtime o tramite compilazione prima del deploy) ha la stessa sintassi del css: un .css rinominato .less funziona domenica 2 ottobre 11
42. domenica 2 ottobre 11
43. manutenibilià disponibile in ogni linguaggio compilazione clientside (a differenza di sass) con less.js Pro il css generato è spesso ridondante Cons domenica 2 ottobre 11
44. !important gzip (58/100) minify (38/100) cookieless (44/100) ... 100 = Alexa top 100 websites domenica 2 ottobre 11
45. marco@fromthefront.it http:/ /cedmax.net @cedmax domenica 2 ottobre 11