coding day may 26th un'architettura scalabile e modulare per il css

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>


<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>








</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>








</body></html>

Selettori

Di discendenza

.classe-1 a {[…]

}

div span {[…]

}

★ Identifica solo gli elementi contenuti in altri elementi.

Selettori Di Discendenza<html>








</body></html>

Selettori

Figlio

.class-1 > span {[…]

}

div > span {[…]

}

★ Identifica solo gli elementi che siano contenuti direttamente nell'elemento padre.

Selettori Figlio<html>








</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

Proprietà

Background

div {background:

#333;}

Proprietà




Border

Proprietà

Border

div {border: 4px solid

green;}

Proprietà




Color

Proprietà

Color

div {color: red;

}

Proprietà




Font

Proprietà

Font

div {font: italic bold 5rem

Georgia;}

Proprietà




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à




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>


<div><p style=”text-

align:center...”></p></div>

</body></html>

Importare il CSS - Attributo style

Importare il CSS - Tag style

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


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


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


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


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


★ 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





Steps.card {

[…]}





Steps

Individuare gli elementi del componente





Steps

Assegnare un nome per ogni componente.card-section {

[…]}

Individuare gli elementi del componente

Assegnare un nome per ogni componente

.card-title {[…]

}


.card-link {[…]

}


.card-subsection {

[…]}


… Base

Layout

Module

State

Theme

… card

… card.css


module/card/card.css

.unipg-card {border: 1px

solid;font-family:

Arial;}


.unipg-card .unipg-card-section {border-bottom: 1px solid;padding: 20px;

}

.unipg-card .unipg-card-section:last-of-type {

border-bottom: 0;}


.unipg-card-title {font-size: 30px;text-transform:

capitalize;}


.unipg-card-link {cursor: pointer;text-decoration: none;text-transform:

uppercase;}


.unipg-card-subsection {display: inline-block;width: 50%;

}

.unipg-card .unipg-card-subsection.unipg-card-subsection-align-right {

text-align: right;}


… Base

Layout

Module

State

Theme

… card

… card.css


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?

coding day may 26th un'architettura scalabile e modulare per il css

Technology