Yet Another Css Talk?? WTF!

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

Slide 35

Slide 35 text

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

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

marco@fromthefront.it http:/ /cedmax.net @cedmax domenica 2 ottobre 11