Modulární kód je záplata na prasárny

Listopad 21, 2016

Znáte to, přijde požadavek klienta na malou změnu, tak to nakóduju na míru a uzavřu. Jenže pak přijde další změna a další změna a najednou jsem v pasti vlastního CSS balastu.

Projektové styly svádí k tomu psát je jednorázově, neboť se s velkou pravděpodobností budou vyskytovat jen na jednom webu. Realita je však odlišná, projekty se kopírují a znovupoužívají. Jakmile to jednou napíšete blbě, šance, že vás to brzo dostane na dalším projektu, je velmi velká. Proto si pojďme ušetřit mlácení hlavou do stolu.

Co k tomu budeme potřebovat?

  • Struktura a moduly
  • Proměnné
  • Mixiny

Struktura a moduly

Struktuře jsme se podrobně věnovali v předchozím článku, kde jsme si názorně ukázali, jak lépe organizovat projektové styly. Teď se dostáváme k modulům. Co je to modul? V solidpixels UI jsou moduly především komponenty. Jedná se o jasně vymezené, znovupoužitelné prvky v uživatelském rozhraní. Může to být tlačítko, informační box, logo a mnoho dalších.

O rozhraní je třeba přemýšlet jako o stavebnici lego, každý modul je jednotlivá kostička, kterou lze napojit jen na další kompatibilní kostičky. Pojdmě si ukázat příklad nabastleného a modulárního kódu:

Příklad nabastleného kódu

#header {
  .navbar {
    ...
    ul > li > a {
      ...
      &:hover {
        ...
      }
    }
  }
  .navbar-secondary {
    ...
  }
  .search-form {
    ...
  } 
  .logo {
    ...
  }
}

Příklad modulárního kódu

// Komponenta: Navbar
.navbar {
  ...
  ul > li > a {
    ...
  }
}

// Komponenta: Navbar Secondary
.navbar-secondary {
  ...
}

// Komponenta: Search Form
.search-form {
  ...
}
    
// Komponenta: Logo
.logo {
  ...
}

Proč je kód vpravo modulární? Jednotlivé komponenty jsou oddělené a na sobě nezávislé, neříkají o sobě, kde se mají v rozhraní vyskytovat, pouze jak se mají vykreslit. Je to velmi malý posun, ale s velkým dopadem, neboť když je později potřeba upravit stylování např. loga, je jasné, kde takový kód hledat.

Proměnné

Dalším nástrojem pro lepší znovupoužitelnost kódu jsou proměnné. Ideálně je na ně třeba nahlížet jako na rozhraní komponenty, pomocí kterého lze danou komponentu měnit. V drtivé většině případů se to týká barev, typografie, odsazení padding/margin, ale lze s jejich pomocí dělat i komplexnější úpravy.

Do proměnných je dobré zapisovat vlastnosti, které očekáváme, že se můžou v budoucnu měnit, ať už na stávajícím projektu nebo na jiném. Jako příklad uvedu zvýrazněné tlačítko v navigační liště:

//
// PROJECT: ABC
// -------------------

// Buttons: Primary
@button-primary-background:        #000;
@button-primary-background-hover:  lighten(#000, 10%);
@button-primary-color:             #fff;
@button-primary-color-hover:       #fff;

// Primary button in navigation
@import "components/button-primary";

Kód tlačítka je izolován v komponentě "button-primary" a lze ho upravovat prostřednictvím několika proměnných (v reálu by se u takového tlačítka dalo nastavit mnohem více, ale pro ukázku to stačí). Jakákoli pozdější úprava barevnosti je otázka změny jedné či více proměnných = obrovská úspora času.

Mixiny

Už máme parádně strukturovaný kód, komponenty izolované do samostatných modulů, konfigurovatelné skrze proměnné, skoro to vypadá jako kodérův ráj. Můžeme to ještě vylepšit? V určitých situacích nám mohou velmi pomoci mixiny. Pojďme se podívat, kdy je dobré je zapojit do práce.

Mixiny nám umožňují používat opakovaně stejné konstrukce kódu, ale s různými parametry, jsou to takové stylové funkce. Pomůžou nám všude tam, kde bychom museli dokola psát stejný kód. Jako příklad si uvedeme 3 různé barvy odkazů v navigační liště:

Kód lze napsat pro první variantu a rozkopírovat pro ostatní varianty. S každou změnou však musíme přepisovat všechny výskyty.

.navbar-link-1 {
	color: red;
    
    &:hover,
    &:focus,
    .active & {
    	darken(red, 10%);
    }
}
.navbar-link-2 {
	color: blue;
    
    &:hover,
    &:focus,
    .active & {
    	darken(blue, 10%);
    }
}
.navbar-link-3 {
	color: green;
    
    &:hover,
    &:focus,
    .active & {
    	darken(green, 10%);
    }
}

Pokud dáme společný kód do mixinu, ušetříme si v budoucnu spoustu práce, výstup bude vždy konsistentní a barvy lze upravovat velmi rychle.

.navbar-link-color(@color) {
  color: @color;
    
  &:hover,
  &:focus,
  .active & {
    darken(@color, 10%);
  }
}

.navbar-link-1 {
  .navbar-link-color(red);
}
.navbar-link-2 {
  .navbar-link-color(blue);
}
.navbar-link-3 {
  .navbar-link-color(green);
}

Oba předchozí zápisy generují identický kód, ale pomocí mixinu jsme dokázali zdroják zásadně zpřehlednit a usnadnit jeho údržbu a další vývoj.

Ukázali jsme si některé "best practices", jak dosáhnout lepšího kódu. V následujícím díle budeme pokračovat a dotkneme se nějakých konkrétních situací.