coding day may 26th un'architettura scalabile e modulare per il css
TRANSCRIPT
Andrea StronatiSoftware Engineer
astronati @stronatiandrea
Un'architettura scalabile e modulare per il CSS
#VendiniUNIPG #CSS
Chi sono?Sono un Software Engineer a Vendini.
★ Backend ma soprattutto Frontend: JS, HTML e CSS
★ AngularJS, ExtJS, Backbone, jQuery, Grunt || Gulp
★ L’idea di base? "Make it simple!"
Di che cosa mi occupo?
E’ iniziato tutto per gioco....
I miei amati LEGO
★ Hanno un aspetto ingegneristico
★ Sono Modulari
★ Sono Creativi
Era il 1995 e a Natale mi regalarono la “cosa” più bella...
Col tempo ho incontrato Internet
★ Per me era un “linguaggio”
★ Un mondo pieno di possibilità, da scoprire
E fu così che decisi di diventare un Developer...
Ho iniziato con PHP, Javascript...
HTML…<html>
<head>...</head><body>
<div><p></p>
</div><p><span>...</span>
</p></body>
</html>
...e CSS
Che cosa sono i CSS?
★ Cascading Style Sheets (Fogli di stile a cascata)
★ E’ un linguaggio usato per la formattazione didocumenti HTML, XHTML e XML, quindi di pagineweb.
★ Nel 2014 è stata ufficializzata la versione 3
Le regole CSS
★ Usando uno o piu selettori:
Dichiara a quale parte del markup viene applicato lo stile★ Seguendo il pattern:
istruzioni di tipo proprietà : valore applicato
Il codice è strutturato
Le regole CSS
selettore {proprietà1: valore1;proprietà2:
valore2,valore3;}
Selettori
Tipo
p {
[…]}
div {[…]
}
★ Applicano la regola a tutti i tag della pagina del tipo determinato.
o….
Selettori Tipo<html>
<head>...</head><body>
<div><span id=”id-1”>this a paragraph</span>
</div><div class=”classe-1”>
for more details<a href=”test.html”>click here</a>
</div><span class=”classe-2”>this is a label</span>
<p id=”id-2”>this is a text
<a href=”index.html”>link</a></p>
</body></html>
Selettori
Classi
.classe-2 {[…]
}
.classe-1 {[…]
}
★ Applicano la regola a tutti gli elementi della pagina che presentano la proprietà class="nome-classe".
Selettori Classi<html>
<head>...</head><body>
<div><span id=”id-1”>this a paragraph</span>
</div><div class=”classe-1”>
for more details<a href=”test.html”>click here</a>
</div><span class=”classe-2”>this is a label</span>
<p id=”id-2”>this is a text
<a href=”index.html”>link</a></p>
</body></html>
Selettori
Identificatori
#id-2 {[…]
}
#id-1 {[…]
}
★ Applicano la regola a quell'elemento della pagina che presenta la proprietà id="identificatore".
★ Gli ID contraddistinguono elementi unici.
o….
Selettori Identificatori<html>
<head>...</head><body>
<div><span id=”id-1”>this a paragraph</span>
</div><div class=”classe-1”>
for more details<a href=”test.html”>click here</a>
</div><span class=”classe-2”>this is a label</span>
<p id=”id-2”>this is a text
<a href=”index.html”>link</a></p>
</body></html>
Selettori
Di discendenza
.classe-1 a {[…]
}
div span {[…]
}
★ Identifica solo gli elementi contenuti in altri elementi.
Selettori Di Discendenza<html>
<head>...</head><body>
<div><span id=”id-1”>this a paragraph</span>
</div><div class=”classe-1”>
for more details<a href=”test.html”>click here</a>
</div><span class=”classe-2”>this is a label</span>
<p id=”id-2”>this is a text
<a href=”index.html”>link</a></p>
</body></html>
Selettori
Figlio
.class-1 > span {[…]
}
div > span {[…]
}
★ Identifica solo gli elementi che siano contenuti direttamente nell'elemento padre.
Selettori Figlio<html>
<head>...</head><body>
<div><span id=”id-1”>this a paragraph</span>
</div><div class=”classe-1”>
for more details<a href=”test.html”>click here</a>
</div><span class=”classe-2”>this is a label</span>
<p id=”id-2”>this is a text
<a href=”index.html”>link</a></p>
</body></html>
Proprietà
★ background. Definisce lo sfondo di un elemento.★ border. Definisce il bordo di un elemento. ★ color. Definisce il colore del testo di un elemento. ★ font. Definisce le proprietà del carattere.★ margin e padding. Definiscono lo spazio circostante gli
elementi. La prima lo spazio esterno ai bordi, la seconda quello interno.
★ text-align. Definisce l'allineamento degli elementi, tra cui il testo.
Ce ne sono piu di 60.
Proprietà
★ background. Definisce lo sfondo di un elemento.★ border. Definisce il bordo di un elemento. ★ color. Definisce il colore del testo di un elemento. ★ font. Definisce le proprietà del carattere.★ margin e padding. Definiscono lo spazio circostante gli
elementi. La prima lo spazio esterno ai bordi, la seconda quello interno.
★ text-align. Definisce l'allineamento degli elementi, tra cui il testo.
Background
Proprietà
Background
div {background:
#333;}
Proprietà
★ background. Definisce lo sfondo di un elemento.★ border. Definisce il bordo di un elemento. ★ color. Definisce il colore del testo di un elemento. ★ font. Definisce le proprietà del carattere.★ margin e padding. Definiscono lo spazio circostante gli
elementi. La prima lo spazio esterno ai bordi, la seconda quello interno.
★ text-align. Definisce l'allineamento degli elementi, tra cui il testo.
Border
Proprietà
Border
div {border: 4px solid
green;}
Proprietà
★ background. Definisce lo sfondo di un elemento.★ border. Definisce il bordo di un elemento. ★ color. Definisce il colore del testo di un elemento. ★ font. Definisce le proprietà del carattere.★ margin e padding. Definiscono lo spazio circostante gli
elementi. La prima lo spazio esterno ai bordi, la seconda quello interno.
★ text-align. Definisce l'allineamento degli elementi, tra cui il testo.
Color
Proprietà
Color
div {color: red;
}
Proprietà
★ background. Definisce lo sfondo di un elemento.★ border. Definisce il bordo di un elemento. ★ color. Definisce il colore del testo di un elemento. ★ font. Definisce le proprietà del carattere.★ margin e padding. Definiscono lo spazio circostante gli
elementi. La prima lo spazio esterno ai bordi, la seconda quello interno.
★ text-align. Definisce l'allineamento degli elementi, tra cui il testo.
Font
Proprietà
Font
div {font: italic bold 5rem
Georgia;}
Proprietà
★ background. Definisce lo sfondo di un elemento.★ border. Definisce il bordo di un elemento. ★ color. Definisce il colore del testo di un elemento. ★ font. Definisce le proprietà del carattere.★ margin e padding. Definiscono lo spazio circostante gli
elementi. La prima lo spazio esterno ai bordi, la seconda quello interno.
★ text-align. Definisce l'allineamento degli elementi, tra cui il testo.
Margin e Padding
Proprietà
Margin e Padding
div {margin: 0;padding: 0;
}
Proprietà
Margin e Padding
div {margin: 20px;padding: 0;
}
Proprietà
Margin e Padding
div {margin: 0;padding: 20px;
}
Proprietà
★ background. Definisce lo sfondo di un elemento.★ border. Definisce il bordo di un elemento. ★ color. Definisce il colore del testo di un elemento. ★ font. Definisce le proprietà del carattere.★ margin e padding. Definiscono lo spazio circostante gli
elementi. La prima lo spazio esterno ai bordi, la seconda quello interno.
★ text-align. Definisce l'allineamento degli elementi, tra cui il testo.
Text align
Proprietà
Font
div {text-align:
center;}
Esempio
.scheda {background: #333; border: 4px solid
#ab0;color: white;
margin: 10px; padding: 25px; text-align: center;}
Esempio
… e ho ritrovato le mie LEGO <3
. {background-color: blue;height: 100px;
}
. {border-top: 50px solid
green;}
… con infinite possibilità
<div class=” ...”>
hello world!</div>
… con infinite possibilità
Importare il CSS<html>
<head>...</head><body>
<div><p style=”text-
align:center...”></p></div>
</body></html>
Importare il CSS - Attributo style
Importare il CSS<html>
<head>...</head><body>
<div><p></p>
</div><style>
p {...}</style>
</body></html>
Importare il CSS - Tag style
Importare il CSS<html>
<head><link href="style.css" ... /></head>
<body><div>
<p></p></div>
</body></html>
Importare il CSS - File esterno
… dopo un po di esperienza
Ho iniziato a scrivere del “bellissimo” CSS
#nav .new item ul li {...}
.Pag .red_area#ORO HR {...}
/* Not working *//* MUST BE A CSS BUG*/.str.hi..new > * > div {...}
Quali erano le problematiche?
★ Perdere il controllo del mio frontend era davvero semplice
★ Non era semplice scrivere CSS a regola d’arte
★ A metà pagina era gia impossibile per me sovrascrivere gli stili appena fatti
Framework
★ Un set di componenti gia fatti… ( come le lego )
★ Permette di guadagnare tempo
★ Griglie e widgets
Metodologie di sviluppo
★ Sono delle linee guida
★ Permette di essere consistenti
★ Rende l’applicazione scalabile (eviterà di farvi fare i miei stessi errori)
Metodologie di sviluppo
★ SMACSS
★ OOCSS
★ BEM
Categorizzare il CSS
★ Base★ Layout★ Module★ State★ Theme
… Base
LayoutModuleStateTheme
Base
a {font-size: 2rem;
}
body {margin: 0;padding:
0;}
★ E’ applicata agli elementi i cui selettori sono gli elementi stessi.
★ Non include alcuna classe o ID
★ E’ vietato l’uso di !important
Base
… Base
Layout
Module
State
Theme
… a
body
… a.css … body.css
Analisi File System.
Layout
.header {margin:
auto;width:
960px;}
★ E’ applicato agli elementi che definiscono “fissano” la pagina.
★ E’ preferibile usare le classi come selettori
.footer {border: 0.125rem
solid;padding: 0.125rem;
}
Layout
… Base
Layout
Module
State
Theme
… footer
header
… footer.css … header.css
Analisi File System.
Module
.tab {text-align:
center;}
★ E’ un componente della pagina. (dialog, carousel, widget, etc…)
★ Un modulo puo essere all’interno di altri moduli
★ Un modulo è definito come componente standalone..tab .tab-title {
font-size: 3rem;}
Module
… Base
Layout
Module
State
Theme
… tab
… tab.css
Analisi File System.
State
.is-tab-active {color: black;
}
★ E’ qualcosa che sovrascrive altri stili
★ Sono applicati ai moduli e ai layout
★ E’ consentito l’uso di !important
.is-tab-disabled {color: grey;
}
State
… Base
Layout
Module
State
Theme
… tab
… tab.css
Analisi File System.
Theme
.tab {border-color:
black;Color: blue
}
★ Può essere applicato a tutti.
★ Raggruppano tutte le regole inerenti il colore
.tab-theme-light {border-color:
white;}
Theme
… Base
Layout
Module
State
Theme
… tab
… tab.css
Analisi File System.
Prefissi★ Evitano collisioni con altri componenti
★ Utile quando altri framework UI vengono usati
.vnd-tag {color: black;
}
.vnd-tag-theme-light {color: white;
}
Costruiamo il nostro primo componente
Costruiamo il nostro primo componente
★ Scegliere un nome per il componente
★ Individuare gli elementi del componente
★ Assegnare un nome per ogni componente seguendo l’approccio: nome-componente-nome-elemento-modificatore
Steps
Costruiamo il nostro primo componente
★ Scegliere un nome per il componente
★ Individuare gli elementi del componente
★ Assegnare un nome per ogni componente seguendo l’approccio: nome-componente-nome-elemento-modificatore
Steps.card {
[…]}
Costruiamo il nostro primo componente
★ Scegliere un nome per il componente
★ Individuare gli elementi del componente
★ Assegnare un nome per ogni componente seguendo l’approccio: nome-componente-nome-elemento-modificatore
Steps
Individuare gli elementi del componente
Costruiamo il nostro primo componente
★ Scegliere un nome per il componente
★ Individuare gli elementi del componente
★ Assegnare un nome per ogni componente seguendo l’approccio: nome-componente-nome-elemento-modificatore
Steps
Assegnare un nome per ogni componente.card-section {
[…]}
Individuare gli elementi del componente
Assegnare un nome per ogni componente
.card-title {[…]
}
Assegnare un nome per ogni componente
.card-link {[…]
}
Assegnare un nome per ogni componente
.card-subsection {
[…]}
Costruiamo il nostro primo componente
… Base
Layout
Module
State
Theme
… card
… card.css
Analisi File System.
module/card/card.css
.unipg-card {border: 1px
solid;font-family:
Arial;}
module/card/card.css
.unipg-card .unipg-card-section {border-bottom: 1px solid;padding: 20px;
}
.unipg-card .unipg-card-section:last-of-type {
border-bottom: 0;}
module/card/card.css
.unipg-card-title {font-size: 30px;text-transform:
capitalize;}
module/card/card.css
.unipg-card-link {cursor: pointer;text-decoration: none;text-transform:
uppercase;}
module/card/card.css
.unipg-card-subsection {display: inline-block;width: 50%;
}
.unipg-card .unipg-card-subsection.unipg-card-subsection-align-right {
text-align: right;}
Costruiamo il nostro primo componente
… Base
Layout
Module
State
Theme
… card
… card.css
Analisi File System.
theme/card/card.css
.unipg-card {background:
#546e7a;border-color:
#737373;box-shadow: ...;color: white;
}
theme/card/card.css
.unipg-card .unipg-card-section {
border-color: #73737;}
theme/card/card.css
.unipg-card-link {color:
#ffab40;}
Minificare il css
*.min.css
*.css
Link★ SMACSS https://smacss.com
★ BEM http://getbem.com
★ Website Style Guide Resources http://styleguides.io
★ Semantic UI http://semantic-ui.com
★ Bootstrap http://getbootstrap.com
★ Foundation http://foundation.zurb.com
Grazie mille per l’attenzione!
</> with <3 || stop()
Domande?