thecodest, Autor na The Codest

Możemy znaleźć wiele publikacji na temat jakości kod napisane w językach programowania takich jak JavaScript, Java, Ruby i inne. Sporo 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 projekt, it is important that the code for similar HTML objects does not have to be repeated for many times in different places. The SCSS preprocessor helps us to use the variables, functions and so-called mixins, which make our code more structured and clean.

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

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