Miten huolehdimme CSS-koodin laadusta?

Löydämme paljon julkaisuja laadusta, joka koskee koodi kirjoitettu ohjelmointikielillä, kuten JavaScript, Java, Ruby ja muut. Suunnittelumalleista, automaattisesta testauksesta ja ohjelmistoarkkitehtuurista on jo puhuttu melko paljon. Kaikissa näissä julkaisuissa CSS:ää näytetään käsiteltävän tukivälineenä, vaikka se muodostaa merkittävän osan kaikista Internet-sovelluksista.

Tässä artikkelissa kuvaamme, mitä työkaluja ja hyviä käytäntöjä käytämme Codestissa, jotta asiakkaillemme tarjoamamme projektit ovat aina korkealaatuisia.

SCSS ESIKÄSITTELIJÄ

CSS-koodin kirjoittaminen riittää pienille sovelluksille. Kun kyseessä on suurempi projektion tärkeää, että samankaltaisten HTML-objektien koodia ei tarvitse toistaa monta kertaa eri paikoissa. SCSS-esikäsittelijä auttaa meitä käyttämään muuttujia, funktioita ja niin sanottuja mixinejä, jotka tekevät koodistamme rakenteellisempaa ja siistimpää.

Seuraavassa luettelossa on esimerkki mixinistä, jonka avulla voit noudattaa "Älä toista itseäsi" -periaatetta:

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

Käyttämällä tätä yhdistelmää voimme kirjoittaa koodia:

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

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

Lyhyemmin ja selkeämmin:

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

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

BEM METODOLOGIA

BEM-menetelmä on yksinkertainen nimeämiskäytäntö, jonka avulla voit luoda modulaarisen, uudelleenkäytettävän ja skaalautuvan CSS-koodin. Osana Codestia käytämme sitä VueJS-komponenttien tyylittelyyn. Pyrimme järjestämään koodimme siten, että yksi .scss-tiedosto, joka sisältää yhden Blockin, osoitetaan yhdelle .vue-komponentille. Esimerkkinä voidaan asettaa v-page-header.vue-komponentin tyylittely.

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

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

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

APUOHJELMALUOKAT

Kun työskentelimme BEM-menetelmän parissa, huomasimme, että hyvin yksinkertaisen toiminnon suorittamiseksi - esimerkiksi tekstin lihavoimiseksi - meidän on keksittävä keinotekoisia CSS-luokkien nimiä:

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

Tämän ongelman poistamiseksi saimme inspiraation Bootstrap-kehyksen lähdekoodissa käytetyistä "apuohjelmaluokista". Tämän ansiosta Vue/HTML-mallien koodissa voimme käyttää seuraavaa tyyppiä:

<div>
  <span class="text-bold">Sisältö</span>
</div>

KOODIN STAATTINEN ANALYYSI

Sinun ei tarvitse vakuuttaa ketään siitä, että työskentelemällä läpinäkyvän ja johdonmukaisia rakenteita sisältävän koodin kanssa voit helposti muokata ja lisätä uusia toimintoja. On tärkeää, että kuka tahansa, joka aloittaa työskentelyn olemassa olevan koodinpätkän parissa, löytää sen melko nopeasti. Usein ohjelmoijilla on kuitenkin omia tapojaan, joita muut eivät välttämättä ymmärrä. joukkue jäsenet. Siksi on niin tärkeää käyttää työkaluja, joiden avulla voit automatisoida koodin tarkistuksen. Osana Codestia käytämme SCSS-LINT-työkalua, jolla voimme analysoida automaattisesti SCSS-koodin, joka sisältää joukon ennalta määriteltyjä sääntöjä. Yksi mielenkiintoisimmista ja rajoittavimmista säännöistä, joita käytämme projekteissamme, voi olla PropertySortOrder-sääntö, joka varmistaa attribuuttien asianmukaisen järjestyksen yhden SCSS-luokan sisällä.

Kuvittele seuraavat kaksi SCSS-koodin osaa:

.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 {
  marginaali: 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;
}

Molemmat kohdat ovat oikein, mutta toinen on luettavampi. Samankaltaiset attribuutit, kuten marginaalit ja pehmusteet, on ryhmitelty yhteen.

Yhteenveto

On vaikea antaa muutamassa lauseessa kaikkea tietoa CSS-koodin organisoinnista laajoissa verkkosovelluksissa, joita luomme Codest-kehyksen avulla. Kannustamme kaikkia lukijoitamme jättämään kommentteja siitä, mitä työkaluja ja hyviä käytäntöjä käytätte omissa projekteissanne.