Sacrificabilità della leggibilità per codice compilato più breve

Attualmente sto rivisitando un codice che ho scritto in sass quando lo stavo imparando e mi sono imbattuto in un particolare problema. Sono stato in grado di scrivere il codice in 2 modi, il primo è il codice più leggibile e il secondo è il codice più breve quando compilato in css. Mi chiedevo se fosse una buona cosa sacrificare una certa leggibilità per dimensioni di file compilate più piccole.

Nell'esempio corrente, l'opzione 1 occupa circa il 60% in meno di caratteri compilati in css. A 12 colonne, la prima opzione utilizza ~ 750 caratteri in meno rispetto alla seconda opzione. Questo è in realtà piuttosto significativo.

L'esempio è piuttosto semplice, ma quando estendere la leggibilità del codice del file sass può diventare più complicato. Vale la pena sacrificare questo per il file compilato più piccolo?

Opzione 1

// Create all columns
@for $i from 1 through $column_amount {
  .col-#{$i}-lg, .col-#{$i}-md, .col-#{$i}-sm {
    width: $i * $col-size;
  }
}

// At medium screen and below set all large columns to 100%
@media all and (max-width: $screen-medium-max) {
  @for $i from 1 through $column_amount {
    .col-#{$i}-lg {
      width: 100%;
    }
  }
}

// At small screen and below set all medium columns to 100%
@media all and (max-width: $screen-small-max) {
  @for $i from 1 through $column_amount {
    .col-#{$i}-md {
      width: 100%;
    }
  }
}

Opzione 2

// Creating the columns
@for $i from 1 through $column_amount {
  .col-#{$i}-lg, .col-#{$i}-md, .col-#{$i}-sm {
    width: $i * $col-size;
  }

  // At medium screen and below set all large columns to 100%
  @media all and (max-width: $screen-medium-max) {
    .col-#{$i}-lg {
      width: 100%;
    }
  }

  // At small screen and below set all medium columns to 100%
  @media all and (max-width: $screen-small-max) {
    .col-#{$i}-md {
      width: 100%;
    }
  }
}

Se esiste qualche estensione che fa questo per me, sarebbe bello saperlo, ma non risponderà alla domanda