Jak dbamy o jakość kodu CSS?

Możemy znaleźć wiele publikacji na temat jakości kod napisane w językach programowania takich jak JavaScript, JavaRuby i inne. Dość dużo zostało już powiedziane na temat wzorców projektowych, automatycznego testowania i architektury oprogramowania. We wszystkich tych publikacjach CSS wydaje się być traktowany jako medium pomocnicze, a przecież stanowi znaczącą część wszystkich aplikacji internetowych.

W tym artykule opiszemy, jakie narzędzia i dobre praktyki stosujemy w Codest, aby projekty, które dostarczamy naszym klientom, były zawsze najwyższej jakości.

PREPROCESOR SCSS

Pisanie kodu CSS jest wystarczające dla małych aplikacji. Kiedy mamy do czynienia z większym projektWażne jest, aby kod dla podobnych obiektów HTML nie musiał być powtarzany wiele razy w różnych miejscach. Preprocesor SCSS pomaga nam używać zmiennych, funkcji i tak zwanych mixinów, które sprawiają, że nasz kod jest bardziej uporządkowany i czysty.

Poniższy listing zawiera przykład mixina, który pozwala spełnić zasadę "Do not Repeat Yourself":

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

Używając tego mixina możemy napisać kod:

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

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

W bardziej zwięzły i przejrzysty sposób:

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

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

BEM METODOLOGIA

Metodologia BEM to prosta konwencja nazewnictwa, która umożliwia tworzenie modułowego, wielokrotnego użytku i skalowalnego kodu CSS. W ramach Codest używamy jej do stylizacji komponentów VueJS. Staramy się organizować nasz kod w taki sposób, aby pojedynczy plik .scss, zawierający jeden blok, był przypisany do pojedynczego komponentu .vue. Jako przykład można podać stylizację komponentu v-page-header.vue.

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

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

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

KLASY UŻYTECZNOŚCI

Podczas pracy z metodologią BEM zauważyliśmy, że aby wykonać bardzo prostą operację - na przykład pogrubić część tekstu - musimy wymyślać sztuczne nazwy klas CSS:

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

Aby wyeliminować ten problem, zainspirowaliśmy się klasami "utilities" używanymi w kodzie źródłowym frameworka Bootstrap. Dzięki temu w kodzie szablonów Vue/HTML możemy użyć następującego typu:

<div>
  <span class="text-bold">Treść</span>
</div>

STATYCZNA ANALIZA KODU

Nie trzeba nikogo przekonywać, że praca z kodem, który jest przejrzysty, a także zawiera spójne struktury, pozwala na łatwe modyfikowanie i dodawanie nowych funkcjonalności. Ważne jest, aby każdy, kto rozpoczyna pracę nad istniejącym fragmentem kodu, mógł się w nim dość szybko odnaleźć. Często jednak programiści mają swoje przyzwyczajenia, które mogą być niezrozumiałe dla innych. zespół członków. Dlatego tak ważne jest korzystanie z narzędzi, które pozwalają zautomatyzować sprawdzanie kodu. W ramach Codest korzystamy z narzędzia SCSS-LINT do automatycznej analizy kodu SCSS, które zawiera zestaw predefiniowanych reguł. Jedną z najciekawszych i najbardziej restrykcyjnych reguł, które wykorzystujemy w naszych projektach, może być reguła PropertySortOrder, która zapewnia odpowiednią kolejność atrybutów w ramach pojedynczej klasy SCSS.

Wyobraź sobie następujące dwie części kodu SCSS:

.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;
}

i:

.item-a {
  margin: 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;
}

Oba fragmenty są poprawne, ale drugi jest bardziej czytelny. Powiązane atrybuty, takie jak marginesy i wyrównania, są zgrupowane razem.

Podsumowanie

Trudno w kilku zdaniach przekazać wszystkie informacje na temat organizacji kodu CSS w rozbudowanych aplikacjach internetowych, które tworzymy z wykorzystaniem frameworka Codest. Zachęcamy wszystkich naszych czytelników do pozostawienia komentarzy na temat tego, z jakich narzędzi i dobrych praktyk korzystacie we własnych projektach.