Refactoring CSS

Mattia Tommasone

@raibaz

RED

GREEN

REFACTOR

"the process of changing a software system in such a way that it does not alter the external behavior of the code yet improves its internal structure"

https://twitter.com/Jedd_Ahyoung/status/826551935822077952

Quando fare refactoring

• (Quasi) sempre 
• "If it ain't broke, don't fix it"
• Boy scout rule
• Code smells
• Non alla prima scrittura
• Per allineare del codice legacy a nuovi standard (pattern, librerie, etc)

MA IN CSS...

Code smell #1: undoing

h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
}

.no-border {
    padding-bottom: 0;
    border-bottom: none;
}

h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

.headline {
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
}

Code smell #2:

magic numbers

height: 37px;
line-height: 1.2em;
width: .7345rem;
border-top: .1875em solid purple;

Code smell #3:

Selettori troppo (o troppo poco) specifici

ul.nav li.active a {}
.content ul.features a.button {} //Do you know BEM?


header {}
h2 {}

Code smell #4: Id

• Uno solo per pagina
• Sono più specifici di qualunque combinazione possibile di classi
• Non c'è veramente un motivo per usarli
• Ci sono dozzine di motivi per NON usarli

Code smell #5: Lo stesso selettore finale più volte

.btn {}

.header .btn,
.header .btn:hover {}

.sidebar .btn {}

.modal .btn {}

.page aside .btn {}

nav .btn {}

ISOLATE

Trick #1

all: initial;

Sad Trombone :(

http://caniuse.com/#feat=css-all

!!!!!

Trick #2

shame.(s)css

• Raggruppa in un unico posto tutto (see, magari) il codice "brutto"
• Anticipa la sedimentazione delle code smells
• Funge da TODO list del debito tecnico
• Tiene traccia del perchè sono stati fatti degli hack

Credits: https://csswizardry.com/2013/04/shame-css/

• git blame shame.scss 

• Non serve a fare finger pointing
• Non è una scusa per scrivere il peggior codice del mondo
• Il codice al suo interno dovrebbe avere vita breve

TRICK #3

TRICK #4

• Quick wins
• Il primo impatto potrebbe essere devastante
• Si può scegliere quanto peso dar loro

Pubblicità!

https://is.gd/ecgmilan