Hvordan bekymrer vi os om kvaliteten af CSS-koden?

Vi kan finde mange publikationer om kvaliteten af en Kode skrevet i programmeringssprog som f.eks. JavaScript, Java, Ruby og andre. Der er allerede blevet sagt en hel del om designmønstre, automatiseret testning og softwarearkitektur. I alle disse publikationer synes CSS at blive behandlet som et understøttende medie, men udgør alligevel en væsentlig del af alle internetapplikationer.

I denne artikel vil vi beskrive, hvilke værktøjer og god praksis vi bruger i Codest, så de projekter, vi leverer til vores kunder, altid er af højeste kvalitet.

SCSS-PRÆPROCESSOR

Det er tilstrækkeligt at skrive CSS-kode til små applikationer. Når man har at gøre med en større projektDet er vigtigt, at koden til lignende HTML-objekter ikke skal gentages mange gange forskellige steder. SCSS-præprocessoren hjælper os med at bruge variabler, funktioner og såkaldte mixins, som gør vores kode mere struktureret og ren.

Følgende liste indeholder et eksempel på et mixin, der giver dig mulighed for at opfylde princippet "Do not Repeat Yourself":

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

Ved at bruge dette mixin kan vi skrive kode:

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

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

På en mere kortfattet og ren måde:

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

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

BEM METODOLOGI

BEM-metoden er en enkel navngivningskonvention, der giver dig mulighed for at skabe en modulær, genanvendelig og skalerbar CSS-kode. Som en del af Codest bruger vi den til at stilisere VueJS-komponenter. Vi forsøger at organisere vores kode på en sådan måde, at en enkelt .scss-fil, der indeholder en blok, tildeles en enkelt .vue-komponent. Styling af v-page-header.vue-komponenten kan bruges som eksempel.

.page-header {
  &__title {
    skriftstørrelse: 2.0rem;
    farve: $color-sort;
    baggrund: $color-white;
  }

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

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

BRUGSKLASSER

Mens vi arbejdede med BEM-metoden, bemærkede vi, at vi var nødt til at opfinde kunstige CSS-klassenavne for at udføre en meget enkel handling - for eksempel at gøre en del af teksten fed:

.page-header {
  &__bolder-item {
    font-vægt: fed;
  }
}

For at eliminere dette problem blev vi inspireret af de "utilities"-klasser, der bruges i kildekoden til Bootstrap-frameworket. Takket være dette kan vi i koden til Vue/HTML-skabeloner bruge følgende type:

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

STATISK ANALYSE AF KODEN

Du behøver ikke at overbevise nogen om, at når du arbejder med en kode, der er gennemsigtig og indeholder ensartede strukturer, kan du nemt ændre og tilføje nye funktioner. Det er vigtigt, at enhver, der begynder at arbejde på et eksisterende fragment af en kode, kan finde det ret hurtigt. Men ofte har programmører deres egne vaner, som måske ikke forstås af andre. hold medlemmer. Derfor er det så vigtigt at bruge værktøjer, der giver dig mulighed for at automatisere kodekontrol. Som en del af Codest bruger vi værktøjet SCSS-LINT til automatisk at analysere en SCSS-kode, som indeholder et sæt foruddefinerede regler. En af de mest interessante og mest restriktive regler, som vi bruger i vores projekter, kan være PropertySortOrder-reglen, som sikrer den rette rækkefølge af attributter inden for en enkelt SCSS-klasse.

Forestil dig følgende to dele af SCSS-koden:

.item-a {
    skriftstørrelse: 14px;
    farve: #FF00FF;
    margin-top: 10px;
    font-vægt: fed;
    baggrundsfarve: #00FFFF;
    padding: 5px;
    margin-bottom: 10px;
}

.item-b {
    skriftstørrelse: 18px;
    polstring: 3px;
    baggrundsfarve: #00FFFF;
    margin-bottom: 4px;
}

og:

.item-a {
  margin: 10px 0;
  polstring: 5px;
  baggrundsfarve: #00FFFF;
  farve: #FF00FF;
    skriftstørrelse: 14px;
    font-vægt: fed;
}

.item-b {
  margin-bottom: 4px;
  polstring: 3px;
  baggrundsfarve: #00FFFF;
    skriftstørrelse: 18px;
}

Begge passager er korrekte, men den anden er mere læsevenlig. Relaterede attributter som margener og udfyldninger er grupperet sammen.

Sammenfatning

Det er svært i nogle få sætninger at give alle oplysninger om organiseringen af CSS-koden i de omfattende webapplikationer, vi skaber med Codest-frameworket. Vi opfordrer alle vores læsere til at skrive kommentarer om, hvilke værktøjer og god praksis du bruger i dine egne projekter.