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

Vi kan hitta många publikationer om kvaliteten på en kod skrivna i programmeringsspråk som t.ex. JavaScript, Java, Ruby och andra. En hel del har redan sagts när det gäller designmönster, automatiserad testning och programvaruarkitektur. I alla dessa publikationer verkar CSS behandlas som ett stödmedium, men utgör ändå en betydande del av alla Internetapplikationer.

I den här artikeln kommer vi att beskriva vilka verktyg och god praxis vi använder i Codest, så att de projekt vi tillhandahåller till våra kunder alltid håller högsta kvalitet.

SCSS PREPROCESSOR

Att skriva CSS-kod är tillräckligt för små applikationer. När du hanterar en större projektFör att inte koden för liknande HTML-objekt ska behöva upprepas många gånger på olika ställen är det viktigt att koden för liknande HTML-objekt inte behöver upprepas många gånger på olika ställen. SCSS preprocessor hjälper oss att använda variabler, funktioner och s.k. mixins, som gör vår kod mer strukturerad och ren.

Följande lista innehåller ett exempel på en mixin som gör att du kan uppfylla principen "Upprepa inte dig själv":

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-innehåll: mitt;
}

Genom att använda denna mixin kan vi skriva kod:

.item-a {
  display: flex;
  align-items: center;
  justify-innehåll: center;
  ...
}

.item-b {
  display: flex;
  align-items: center;
  justify-innehåll: mitt;
  ...
}

På ett mer kortfattat och rent sätt:

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

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

BEM METODOLOGI

BEM-metodiken är en enkel namngivningskonvention som gör att du kan skapa en modulär, återanvändbar och skalbar CSS-kod. Som en del av Codest använder vi den för att stilisera VueJS-komponenter. Vi försöker organisera vår kod på ett sådant sätt att en enda .scss-fil, som innehåller ett block, tilldelas en enda .vue-komponent. Styling av v-page-header.vue-komponenten kan ställas in som ett exempel.

.sidhuvud {
  &__title {
    teckenstorlek: 2,0rem;
    färg: $color-black;
    bakgrund: $color-white;
  }

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

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

VERKTYGSKLASSER

När vi arbetade med BEM-metoden märkte vi att vi måste uppfinna artificiella CSS-klassnamn för att kunna utföra en mycket enkel åtgärd - t.ex. att fetstila en del av texten:

.sidhuvud {
  &__bolder-objekt {
    typsnittsvikt: fet;
  }
}

För att eliminera detta problem inspirerades vi av "utilities"-klasserna som används i källkoden för Bootstrap-ramverket. Tack vare detta kan vi i koden för Vue/HTML-mallar använda följande typ:

<div>
  <span class="text-bold">Innehåll</span>
</div>

STATISK ANALYS AV KODEN

Du behöver inte övertyga någon om att du genom att arbeta med en kod som är transparent och innehåller konsekventa strukturer enkelt kan ändra och lägga till nya funktioner. Det är viktigt att alla som börjar arbeta med ett befintligt fragment av en kod kan hitta det ganska snabbt. Men ganska ofta har programmerare sina egna vanor som kanske inte förstås av andra Team medlemmar. Det är därför det är så viktigt att använda verktyg som gör att man kan automatisera kodkontrollen. Som en del av Codest använder vi verktyget SCSS-LINT för att automatiskt analysera en SCSS-kod, som innehåller en uppsättning fördefinierade regler. En av de mest intressanta och mest restriktiva reglerna som vi använder i våra projekt kan vara PropertySortOrder-regeln, som säkerställer rätt ordning på attributen inom en och samma SCSS-klass.

Föreställ dig följande två delar av SCSS-koden:

.item-a {
    teckenstorlek: 14px;
    färg: #FF00FF;
    marginal-topp: 10px;
    typsnittsvikt: fet;
    bakgrundsfärg: #00FFFF;
    stoppning: 5px;
    margin-bottom: 10px;
}

.item-b {
    teckenstorlek: 18px;
    stoppning: 3px;
    bakgrundsfärg: #00FFFF;
    marginal-botten: 4px;
}

och..:

.item-a {
  marginal: 10px 0;
  stoppning: 5px;
  bakgrundsfärg: #00FFFF;
  färg: #FF00FF;
    teckenstorlek: 14px;
    typsnittsvikt: fet;
}

.item-b {
  marginal-botten: 4px;
  stoppning: 3px;
  bakgrundsfärg: #00FFFF;
    teckenstorlek: 18px;
}

Båda passagerna är korrekta, men den andra är mer läsbar. Relaterade attribut som marginaler och utfyllnader grupperas tillsammans.

Sammanfattning

Det är svårt att i några få meningar ge all information om CSS-kodorganisationen i de omfattande webbapplikationer som vi skapar med Codest-ramverket. Vi uppmuntrar alla våra läsare att lämna kommentarer om vilka verktyg och bra metoder ni använder i era egna projekt.