Slide 1

Slide 1 text

Yet Another Css Talk?? WTF! by Marco Cedaro http:/ /cedmax.net @cedmax domenica 2 ottobre 11

Slide 2

Slide 2 text

Perchè un altro talk su css? domenica 2 ottobre 11

Slide 3

Slide 3 text

Naturale reazione a un talk css domenica 2 ottobre 11

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Think Outside the Brackets domenica 2 ottobre 11

Slide 8

Slide 8 text

Css Structure ul { ... } ul li { ... } ul li a { ... } domenica 2 ottobre 11

Slide 9

Slide 9 text

Css Structure ul { ... } ul li { ... } ul li a { ... } domenica 2 ottobre 11

Slide 10

Slide 10 text

Css Structure ul { ... } ul li { ... } ul li a { ... } Cross Browser e Hack domenica 2 ottobre 11

Slide 11

Slide 11 text

Css Structure ul { ... } ul li { ... } ul li a { ... } Cross Browser e Hack Ordine delle Proprietà domenica 2 ottobre 11

Slide 12

Slide 12 text

Css Structure ul { ... } ul li { ... } ul li a { ... } Cross Browser e Hack Ordine delle Proprietà Css3 domenica 2 ottobre 11

Slide 13

Slide 13 text

Css Structure ul { ... } ul li { ... } ul li a { ... } Cross Browser e Hack Ordine delle Proprietà Css3 Proprietà proprietarie domenica 2 ottobre 11

Slide 14

Slide 14 text

Css Structure ul { ... } ul li { ... } ul li a { ... } domenica 2 ottobre 11

Slide 15

Slide 15 text

Css Structure ul { ... } ul li { ... } ul li a { ... } domenica 2 ottobre 11

Slide 16

Slide 16 text

Css Structure ul { ... } ul li { ... } ul li a { ... } Document Architecture domenica 2 ottobre 11

Slide 17

Slide 17 text

Object Oriented Css domenica 2 ottobre 11

Slide 18

Slide 18 text

Cos’è OOCss un framework? un tool? una filosofia? domenica 2 ottobre 11

Slide 19

Slide 19 text

Cos’è OOCss un framework? un tool? una filosofia? un approccio archietturale domenica 2 ottobre 11

Slide 20

Slide 20 text

Cos’è OOCss un framework? un tool? una filosofia? un approccio archietturale Nicole Sullivan Performance Engineer @ Yahoo domenica 2 ottobre 11

Slide 21

Slide 21 text

pensate a una funzione Javascript che a seconda di dove viene richiamata ritorni cose diverse domenica 2 ottobre 11

Slide 22

Slide 22 text

pensate a una classe Css che a seconda di dove viene utilizzata renderizzi stili diversi domenica 2 ottobre 11

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

I principi Separazione di struttura e skin Separazione di contenitore e contenuto domenica 2 ottobre 11

Slide 25

Slide 25 text

Struttura != Skin domenica 2 ottobre 11

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Contenitore != Contenuto domenica 2 ottobre 11

Slide 28

Slide 28 text

Contenitore != Contenuto domenica 2 ottobre 11

Slide 29

Slide 29 text

Real Life Example domenica 2 ottobre 11

Slide 30

Slide 30 text

domenica 2 ottobre 11

Slide 31

Slide 31 text

TADA! domenica 2 ottobre 11

Slide 32

Slide 32 text

Come si ottiene tutto questo? domenica 2 ottobre 11

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

e il business? è contento! domenica 2 ottobre 11

Slide 39

Slide 39 text

What else? domenica 2 ottobre 11

Slide 40

Slide 40 text

“If you're still building websites without {Less}, you're an idiot” http:/ /incident57.com/less/ domenica 2 ottobre 11

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

domenica 2 ottobre 11

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

!important gzip (58/100) minify (38/100) cookieless (44/100) ... 100 = Alexa top 100 websites domenica 2 ottobre 11

Slide 45

Slide 45 text

[email protected] http:/ /cedmax.net @cedmax domenica 2 ottobre 11