Jak se staráme o kvalitu kódu CSS?

O kvalitě produktu můžeme najít mnoho publikací. kód napsané v programovacích jazycích, jako jsou JavaScript, Java, Ruby a další. O návrhových vzorech, automatizovaném testování a dalších aspektech již bylo řečeno poměrně hodně. architektura softwaru. Ve všech těchto publikacích se zdá, že CSS je považováno za podpůrné médium, a přitom tvoří významnou část všech internetových aplikací.

V tomto článku popíšeme, jaké nástroje a osvědčené postupy používáme v Codestu, aby projekty, které poskytujeme našim klientům, byly vždy v nejvyšší kvalitě.

PREPROCESOR SCSS

Pro malé aplikace stačí psát kód CSS. Při práci s většími projekt, je důležité, aby se kód pro podobné objekty HTML nemusel opakovat mnohokrát na různých místech. Na adrese SCSS preprocesor pomáhá nás používat proměnné, funkce a takzvané mixiny, díky nimž je náš kód strukturovanější a přehlednější.

Následující výpis obsahuje příklad mixinu, který umožňuje splnit zásadu "Neopakuj se":

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

Pomocí tohoto mixinu můžeme psát kód:

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

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

Stručněji a přehledněji:

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

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

BEM METODOLOGIE

Metodika BEM je jednoduchá konvence pojmenování, která umožňuje vytvářet modulární, opakovaně použitelný a škálovatelný kód CSS. V rámci systému Codest ji používáme ke stylizaci komponent VueJS. Snažíme se uspořádat náš kód tak, aby jeden soubor .scss, obsahující jeden blok, byl přiřazen jedné komponentě .vue. Jako příklad lze uvést stylování komponenty v-page-header.vue.

.page-header {
  &__title {
    font-size: 2.0rem;
    barva: $color-black;
    pozadí: $color-white;
  }

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

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

UŽITKOVÉ TŘÍDY

Při práci s metodikou BEM jsme si všimli, že pro provedení velmi jednoduché operace - například ztučnění části textu - musíme vymýšlet umělé názvy tříd CSS:

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

Abychom tento problém odstranili, inspirovali jsme se třídami "utilities" používanými ve zdrojovém kódu frameworku Bootstrap. Díky tomu můžeme v kódu šablon Vue/HTML použít následující typ:

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

STATICKÁ ANALÝZA KÓDU

O tom, že práce s kódem, který je přehledný a zároveň obsahuje konzistentní struktury, umožňuje snadné úpravy a přidávání nových funkcí, nemusíte nikoho přesvědčovat. Důležité je, aby každý, kdo začne pracovat na existujícím fragmentu kódu, se v něm dokázal poměrně rychle zorientovat. Dost často však mají programátoři své vlastní zvyklosti, které nemusí být pochopitelné pro ostatní tým členové. Proto je důležité používat nástroje, které umožňují automatizovat kontrolu kódu. V rámci systému Codest používáme k automatické analýze kódu SCSS nástroj SCSS-LINT, který obsahuje sadu předdefinovaných pravidel. Jedním z nejzajímavějších a nejpřísnějších pravidel, která v našich projektech používáme, může být pravidlo PropertySortOrder, které zajišťuje vhodné pořadí atributů v rámci jedné třídy SCSS.

Představte si následující dvě části kódu SCSS:

.item-a {
    velikost písma: 14px;
    barva: #FF00FF;
    margin-top: 10px;
    font-weight: bold;
    barva pozadí: #00FFFF;
    padding: V případě, že je to možné, je třeba provést další úpravy, které by mohly vést ke změně vzhledu;
    margin-bottom: 10px;
}

.item-b {
    velikost písma: 18px;
    padding: 3px;
    barva pozadí: #00FFFF;
    margin-bottom: V případě, že je to možné, je třeba, aby se v tomto případě jednalo o tzv;
}

a:

.item-a {
  margin: 10px 0;
  padding: 5px;
  barva pozadí: #00FFFF;
  barva: #FF00FF;
    velikost písma: 14px;
    font-weight: bold;
}

.item-b {
  margin-bottom: Bt-bot: 4px;
  padding: 3px;
  barva pozadí: #00FFFF;
    velikost písma: 18px;
}

Obě pasáže jsou správné, ale druhá je čitelnější. Související atributy, jako jsou okraje a řádkování, jsou seskupeny dohromady.

Souhrn

Je obtížné v několika větách uvést všechny informace o organizaci kódu CSS v rozsáhlých webových aplikacích, které vytváříme pomocí frameworku Codest. Vyzýváme všechny naše čtenáře, aby zanechali komentáře o tom, které nástroje a osvědčené postupy používáte ve svých vlastních projektech.