Come ci preoccupiamo della qualità del codice CSS?

Si possono trovare molte pubblicazioni sulla qualità di una codice scritti in linguaggi di programmazione come JavaScript, Java, Ruby e altri. Molto è già stato detto in termini di design pattern, test automatizzati e architettura del software. In tutte queste pubblicazioni, il CSS sembra essere trattato come un supporto eppure costituisce una parte significativa di tutte le applicazioni Internet.

In questo articolo descriveremo quali sono gli strumenti e le buone pratiche che utilizziamo in Codest, affinché i progetti che forniamo ai nostri clienti siano sempre della massima qualità.

PREPROCESSORE SCSS

La scrittura di codice CSS è sufficiente per piccole applicazioni. Quando si ha a che fare con applicazioni più grandi progettoÈ importante che il codice per oggetti HTML simili non debba essere ripetuto più volte in punti diversi. Il preprocessore SCSS ci aiuta a utilizzare le variabili, le funzioni e i cosiddetti mixin, che rendono il nostro codice più strutturato e pulito.

Il seguente elenco contiene un esempio di mixin che consente di soddisfare il principio "Non ripetersi":

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

Utilizzando questo mixin possiamo scrivere del codice:

.item-a {
  display: flex;
  align-items: center;
  justify-content: center;
  ...
}

.item-b {
  visualizzazione: flex;
  align-items: center;
  justify-content: center;
  ...
}

In modo più conciso e pulito:

.item-a {
  @include flex-center;
}

.item-b {
  @include flex-center;
}

BEM METODOLOGIA

La metodologia BEM è una semplice convenzione di denominazione che consente di creare un codice CSS modulare, riutilizzabile e scalabile. Come parte di Codest, la utilizziamo per stilizzare i componenti VueJS. Cerchiamo di organizzare il nostro codice in modo tale che un singolo file .scss, contenente un blocco, sia assegnato a un singolo componente .vue. Lo stile del componente v-page-header.vue può essere preso come esempio.

.page-header {
  &__titolo {
    font-size: 2.0rem;
    colore: $color-nero;
    sfondo: $color-white;
  }

  &__logo {
    sfondo: url('/images/background.png') no-repeat 0 0;

    &--verticale {
      sfondo: url('/images/background-2.png') no-repeat 0 0;
    }
  }
}

CLASSI DI UTILITÀ

Lavorando con la metodologia BEM, abbiamo notato che per eseguire un'operazione molto semplice - ad esempio, il grassetto di una parte del testo - dobbiamo inventare nomi di classi CSS artificiali:

.page-header {
  &__bolder-item {
    font-weight: bold;
  }
}

Per eliminare questo problema, ci siamo ispirati alle classi "utilities" utilizzate nel codice sorgente del framework Bootstrap. Grazie a queste, nel codice dei modelli Vue/HTML possiamo utilizzare il seguente tipo:

<div>
  <span class="text-bold">Contenuto</span>
</div>

ANALISI STATICA DEL CODICE

Non c'è bisogno di convincere nessuno che lavorare con un codice trasparente e contenente strutture coerenti permette di modificare e aggiungere facilmente nuove funzionalità. È importante che chiunque inizi a lavorare su un frammento di codice esistente possa trovarlo abbastanza velocemente. Tuttavia, molto spesso i programmatori hanno le loro abitudini che possono non essere comprese dagli altri. squadra membri. Per questo motivo è importante utilizzare strumenti che consentano di automatizzare il controllo del codice. Nell'ambito di Codest, utilizziamo lo strumento SCSS-LINT per analizzare automaticamente il codice SCSS, che contiene un insieme di regole predefinite. Una delle regole più interessanti e più restrittive che utilizziamo nei nostri progetti può essere la regola PropertySortOrder, che garantisce l'ordine appropriato degli attributi all'interno di una singola classe SCSS.

Immaginate le seguenti due parti del codice SCSS:

.item-a {
    dimensione del carattere: 14px;
    colore: #FF00FF;
    margin-top: 10px;
    peso del carattere: grassetto;
    colore di sfondo: #00FFFF;
    padding: 5px;
    margine inferiore: 10px;
}

.item-b {
    dimensione del carattere: 18px;
    padding: 3px;
    colore di sfondo: #00FFFF;
    margin-bottom: 4px;
}

e:

.item-a {
  margine: 10px 0;
  padding: 5px;
  colore di sfondo: #00FFFF;
  colore: #FF00FF;
    dimensione del carattere: 14px;
    font-weight: bold;
}

.item-b {
  margin-bottom: 4px;
  padding: 3px;
  colore di sfondo: #00FFFF;
    font-size: 18px;
}

Entrambi i passaggi sono corretti, ma il secondo è più leggibile. Gli attributi correlati, come i margini e i padding, sono raggruppati insieme.

Sintesi

È difficile fornire in poche frasi tutte le informazioni sull'organizzazione del codice CSS nelle ampie applicazioni web che creiamo con il framework Codest. Invitiamo tutti i nostri lettori a lasciare commenti su quali strumenti e buone pratiche utilizzate nei vostri progetti.