Refactoring CSS

FOR PERFORMANCES

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"

"What is technical debt?" Technical debt is hard to explain, but a picture is worth a thousand words. #programming #softwaredevelopment

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

mantenibilità, leggibilità, chiarezza

...sì ok, ma le performances?

regole generali

  • Non tutti i selettori sono uguali
  • Usare la GPU è una buona idea
  • Usare le animazioni lo è meno

  • Time to first render?

  • Time to first meaningful paint?

  • TIME TO INTERACTIVE?

  • FPS?

Made with Slides.com