Hoe geven we om de kwaliteit van CSS-code?

We kunnen veel publicaties vinden over de kwaliteit van een code geschreven in programmeertalen zoals JavaScript, JavaRuby en anderen. Er is al veel gezegd over design patterns, geautomatiseerd testen en softwarearchitectuur. In al deze publicaties lijkt CSS te worden behandeld als een ondersteunend medium en toch vormt het een belangrijk onderdeel van alle internettoepassingen.

In dit artikel beschrijven we welke tools en goede praktijken we gebruiken in Codest, zodat de projecten die we aan onze klanten leveren altijd van de hoogste kwaliteit zijn.

SCSS PREPROCESSOR

CSS-code schrijven is voldoende voor kleine toepassingen. Bij grotere projectHet is belangrijk dat de code voor gelijksoortige HTML-objecten niet vele malen op verschillende plaatsen wordt herhaald. De SCSS-preprocessor helpt ons bij het gebruik van variabelen, functies en zogenaamde mixins, die onze code gestructureerder en schoner maken.

De volgende lijst bevat een voorbeeld van een mixin waarmee je kunt voldoen aan het principe "Herhaal jezelf niet":

@mixin flex-center {
  weergave: flex;
  uitlijnen-items: centreren;
  justify-content: centre;
}

Door deze mixin te gebruiken kunnen we code schrijven:

.item-a {
  weergave: flex;
  uitlijnen-items: centreren;
  justify-content: centre;
  ...
}

.item-b {
  weergave: flex;
  uitlijnen-items: centreren;
  justify-content: centre;
  ...
}

Beknopter en duidelijker:

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

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

BEM METODIEK

De BEM-methodologie is een eenvoudige naamgevingsconventie waarmee je modulaire, herbruikbare en schaalbare CSS-code kunt maken. Als onderdeel van Codest gebruiken we het om VueJS componenten te stylen. We proberen onze code zo te organiseren dat één .scss bestand, dat één Block bevat, wordt toegewezen aan één .vue component. Styling van het v-page-header.vue component kan als voorbeeld dienen.

.page-header {
  &__title {
    lettergrootte: 2.0rem;
    kleur: $color-zwart;
    achtergrond: $color-wit;
  }

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

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

GEBRUIKSKLASSEN

Toen we met de BEM-methodologie werkten, merkten we dat we kunstmatige CSS-klassenamen moesten verzinnen om een heel eenvoudige bewerking uit te voeren - bijvoorbeeld een deel van de tekst vet maken:

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

Om dit probleem op te lossen, hebben we ons laten inspireren door de "utilities" klassen die worden gebruikt in de broncode van het Bootstrap framework. Hierdoor kunnen we in de code van Vue/HTML sjablonen het volgende type gebruiken:

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

STATISCHE ANALYSE VAN DE CODE

Je hoeft niemand ervan te overtuigen dat het werken met een code die transparant is en ook consistente structuren bevat, je in staat stelt om gemakkelijk nieuwe functionaliteiten aan te passen en toe te voegen. Het is belangrijk dat iedereen die aan de slag gaat met een bestaand fragment code, deze vrij snel kan vinden. Programmeurs hebben echter vaak hun eigen gewoontes die niet altijd begrepen worden door andere programmeurs. team leden. Daarom is het zo belangrijk om tools te gebruiken waarmee je het controleren van code kunt automatiseren. Als onderdeel van Codest gebruiken we de SCSS-LINT tool om automatisch een SCSS code te analyseren, die een set vooraf gedefinieerde regels bevat. Een van de interessantste en meest beperkende regels die we in onze projecten gebruiken, is misschien wel de PropertySortOrder-regel, die zorgt voor de juiste volgorde van attributen binnen een enkele SCSS-klasse.

Stel je de volgende twee delen van de SCSS-code voor:

.item-a {
    lettergrootte: 14px;
    kleur: #FF00FF;
    margin-top: 10px;
    font-weight: bold;
    achtergrondkleur: #00FFFF;
    opvulling: 5px;
    marge-onder: 10px;
}

.item-b {
    lettergrootte: 18px;
    opvulling: 3px;
    achtergrondkleur: #00FFFF;
    marge-bodem: 4px;
}

en:

.item-a {
  marge: 10px 0;
  padding: 5px;
  achtergrondkleur: #00FFFF;
  kleur: #FF00FF;
    lettergrootte: 14px;
    font-weight: bold;
}

.item-b {
  marge-bodem: 4px;
  padding: 3px;
  achtergrondkleur: #00FFFF;
    lettergrootte: 18px;
}

Beide passages zijn correct, maar de tweede is leesbaarder. Verwante attributen zoals marges en opvullingen zijn gegroepeerd.

Samenvatting

Het is moeilijk om in een paar zinnen alle informatie te geven over de organisatie van de CSS-code in de uitgebreide webapplicaties die we maken met het Codest-framework. We moedigen al onze lezers aan om commentaar achter te laten over welke tools en goede praktijken jullie gebruiken in jullie eigen projecten.