Kuidas me hoolime CSS-koodi kvaliteedist?

Me võime leida palju väljaandeid kvaliteedi kohta kood mis on kirjutatud sellistes programmeerimiskeeltes nagu JavaScript, Java, Ruby ja teised. Üsna palju on juba räägitud disainimustritest, automatiseeritud testimisest ja tarkvara arhitektuurist. Kõigis neis väljaannetes näib CSSi olevat käsitletud kui toetavat vahendit, kuid see moodustab siiski olulise osa kõigist Interneti-rakendustest.

Selles artiklis kirjeldame, milliseid vahendeid ja häid tavasid me Codestis kasutame, et meie klientidele pakutavad projektid oleksid alati kõrgeima kvaliteediga.

SCSS PREPROCESSOR

Väikeste rakenduste puhul piisab CSS-koodi kirjutamisest. Kui tegemist on suurema projekt, on oluline, et sarnaste HTML-objektide koodi ei peaks korduma mitu korda erinevates kohtades. SCSS eelprotsessor aitab meil kasutada muutujaid, funktsioone ja nn mixins, mis muudavad meie koodi struktureeritumaks ja puhtamaks.

Järgnevas loetelus on toodud näide mixinist, mis võimaldab täita põhimõtet "Ära korda ennast":

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

Kasutades seda mixin'i saame kirjutada koodi:

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

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

Lühidalt ja puhtamalt:

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

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

BEM METODOLOOGIA

BEM-metoodika on lihtne nimetamiskonventsioon, mis võimaldab luua modulaarse, taaskasutatava ja skaleeritava CSS-koodi. Codesti osana kasutame seda VueJS-i komponentide stiliseerimiseks. Me püüame oma koodi korraldada nii, et üks .scss-fail, mis sisaldab ühte plokki, on määratud ühele .vue-komponendile. Näitena võib määrata v-page-header.vue komponendi stiliseerimise.

.page-header {
  &__title {
    font-size: 2.0rem;
    color: $color-must;
    background: $color-white;
  }

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

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

KASULIKUD KLASSID

BEM-metoodikaga töötades märkasime, et väga lihtsa toimingu - näiteks tekstiosa boldimise - teostamiseks peame leiutama kunstlikke CSS-klassi nimesid:

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

Selle probleemi kõrvaldamiseks saime inspiratsiooni Bootstrap raamistiku lähtekoodis kasutatavatest "utiliitide" klassidest. Tänu sellele saame Vue/HTML mallide koodis kasutada järgmist tüüpi:

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

KOODI STAATILINE ANALÜÜS

Te ei pea kedagi veenma, et töötamine läbipaistva ja ühtlasi järjepidevaid struktuure sisaldava koodiga võimaldab teil hõlpsasti muuta ja lisada uusi funktsioone. Oluline on, et igaüks, kes alustab tööd olemasoleva koodifragmendi kallal, leiaks selle üsna kiiresti üles. Kuid üsna sageli on programmeerijatel oma harjumused, mis ei pruugi teistele arusaadavad olla. meeskond liikmed. Seepärast on nii oluline kasutada vahendeid, mis võimaldavad teil koodi kontrollimist automatiseerida. Codesti osana kasutame SCSS-LINT tööriista SCSS-koodi automaatseks analüüsimiseks, mis sisaldab eelnevalt määratletud reeglite kogumit. Üheks kõige huvitavamaks ja piiravamaks reegliks, mida me oma projektides kasutame, võib olla PropertySortOrder reegel, mis tagab atribuutide sobiva järjekorra ühe SCSS-klassi sees.

Kujutage ette järgmised kaks SCSS-koodi osa:

.item-a {
    font-size: 14px;
    color: #FF00FF;
    margin-top: 10px;
    font-weight: bold;
    background-color: #00FFFF;
    padding: 5px;
    margin-bottom: 10px;
}

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

ja:

.item-a {
  marginaal: 10px 0;
  padding: 5px;
  background-color: #00FFFF;
  color: #FF00FF;
    font-size: 14px;
    font-weight: bold;
}

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

Mõlemad lõigud on õiged, kuid teine on loetavam. Seotud atribuudid, nagu marginaalid ja pehmendused, on rühmitatud kokku.

Kokkuvõte

Mõne lausega on raske anda kogu teavet CSS-koodi korralduse kohta ulatuslikes veebirakendustes, mida me loome Codesti raamistiku abil. Julgustame kõiki lugejaid jätma kommentaare, milliseid vahendeid ja häid tavasid te oma projektides kasutate.