Hvordan bryr vi oss om kvaliteten på CSS-koden?

Vi kan finne mange publikasjoner om kvaliteten på en kode skrevet i programmeringsspråk som f.eks. JavaScript, Java, Ruby og andre. Det er allerede sagt mye om designmønstre, automatisert testing og programvarearkitektur. I alle disse publikasjonene ser CSS ut til å bli behandlet som et støttemedium, men utgjør likevel en betydelig del av alle Internett-applikasjoner.

I denne artikkelen vil vi beskrive hvilke verktøy og god praksis vi bruker i Codest, slik at prosjektene vi leverer til kundene våre alltid holder høyest mulig kvalitet.

SCSS PREPROSESSOR

Det er tilstrekkelig å skrive CSS-kode for små applikasjoner. Når du har å gjøre med en større prosjektNår vi bruker SCSS, er det viktig at koden for lignende HTML-objekter ikke må gjentas mange ganger på forskjellige steder. SCSS preprosessoren hjelper oss med å bruke variabler, funksjoner og såkalte mixins, som gjør koden vår mer strukturert og ren.

Følgende liste inneholder et eksempel på en mixin som gjør det mulig å oppfylle "Ikke gjenta deg selv"-prinsippet:

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

Ved å bruke denne mixinen 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 mer kortfattet og ren måte:

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

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

BEM METODOLOGI

BEM-metodikken er en enkel navnekonvensjon som lar deg lage en modulær, gjenbrukbar og skalerbar CSS-kode. Som en del av Codest bruker vi den til å stilisere VueJS-komponenter. Vi prøver å organisere koden vår på en slik måte at en enkelt .scss-fil, som inneholder en blokk, er tilordnet en enkelt .vue-komponent. Styling av v-page-header.vue-komponenten kan settes som et eksempel.

.page-header {
  &__title {
    skriftstørrelse: 2.0rem;
    farge: $color-svart;
    bakgrunn: $color-hvit;
  }

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

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

NYTTEKLASSER

I arbeidet med BEM-metodikken la vi merke til at for å utføre en veldig enkel operasjon - for eksempel å gjøre en del av teksten fet - må vi finne på kunstige CSS-klassenavn:

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

For å eliminere dette problemet har vi latt oss inspirere av "utilities"-klassene som brukes i kildekoden til Bootstrap-rammeverket. Takket være dette kan vi i koden til Vue/HTML-maler bruke følgende type:

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

STATISK ANALYSE AV KODEN

Du trenger ikke å overbevise noen om at det å jobbe med en kode som er gjennomsiktig og inneholder konsistente strukturer, gjør det enkelt å endre og legge til nye funksjoner. Det er viktig at alle som begynner å jobbe med et eksisterende fragment av en kode, kan finne det ganske raskt. Men ofte har programmerere sine egne vaner som kanskje ikke blir forstått av andre. team medlemmer. Derfor er det så viktig å bruke verktøy som gjør det mulig å automatisere kodesjekken. Som en del av Codest bruker vi verktøyet SCSS-LINT til automatisk analyse av SCSS-kode, som inneholder et sett med forhåndsdefinerte regler. En av de mest interessante og mest restriktive reglene vi bruker i prosjektene våre, er kanskje PropertySortOrder-regelen, som sikrer riktig rekkefølge på attributtene i en enkelt SCSS-klasse.

Se for deg følgende to deler av SCSS-koden:

.item-a {
    skriftstørrelse: 14px;
    farge: #FF00FF;
    margin-topp: 10px;
    font-vekt: fet;
    bakgrunnsfarge: #00FFFFFF;
    padding: 5px;
    margin-bottom: 10px;
}

.item-b {
    skriftstørrelse: 18px;
    padding: 3px;
    bakgrunnsfarge: #00FFFFFF;
    margin-bunn: 4px;
}

og:

.item-a {
  margin: 10px 0;
  polstring: 5px;
  bakgrunnsfarge: #00FFFFFF;
  farge: #FF00FFFF;
    skriftstørrelse: 14px;
    font-weight: bold;
}

.item-b {
  margin-bunn: 4px;
  polstring: 3px;
  bakgrunnsfarge: #00FFFFFF;
    font-size: 18px;
}

Begge passasjene er korrekte, men den andre er mer lesbar. Relaterte attributter som marginer og utfyllinger er gruppert sammen.

Sammendrag

Det er vanskelig å gi all informasjon om organiseringen av CSS-koden i de omfattende webapplikasjonene vi lager med Codest-rammeverket i noen få setninger. Vi oppfordrer alle våre lesere til å legge igjen kommentarer om hvilke verktøy og god praksis dere bruker i deres egne prosjekter.