Como é que nos preocupamos com a qualidade do código CSS?

Podemos encontrar muitas publicações sobre a qualidade de um código escritos em linguagens de programação como JavaScript, Java, Rubi e outros. Muito já foi dito em termos de padrões de design, testes automatizados e arquitetura de software. Em todas estas publicações, as CSS parecem ser tratadas como um meio de apoio e, no entanto, constituem uma parte significativa de todas as aplicações Internet.

Neste artigo vamos descrever quais as ferramentas e boas práticas que utilizamos na Codest, para que os projectos que fornecemos aos nossos clientes sejam sempre da mais alta qualidade.

PRÉ-PROCESSADOR SCSS

Escrever código CSS é suficiente para pequenas aplicações. Quando se trata de uma aplicação maior projetoÉ importante que o código para objectos HTML semelhantes não tenha de ser repetido muitas vezes em locais diferentes. O SCSS o pré-processador ajuda nós para utilizar as variáveis, funções e os chamados mixins, que tornam o nosso código mais estruturado e limpo.

A listagem seguinte contém um exemplo de um mixin que lhe permite cumprir o princípio "Não se repita":

@mixin flex-center {
  display: flex;
  alinhar-itens: centro;
  justify-content: center;
}

Ao utilizar este mixin, podemos escrever código:

.item-a {
  display: flex;
  alinhar-itens: centro;
  justificar-conteúdo: centro;
  ...
}

.item-b {
  exibição: flex;
  alinhar-itens: centro;
  justificar-conteúdo: centro;
  ...
}

De uma forma mais concisa e clara:

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

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

BEM METODOLOGIA

A metodologia BEM é uma convenção de nomenclatura simples que permite criar um código CSS modular, reutilizável e escalável. Como parte do Codest, usamo-lo para estilizar os componentes VueJS. Tentamos organizar o nosso código de forma a que um único ficheiro .scss, contendo um bloco, seja atribuído a um único componente .vue. O estilo do componente v-page-header.vue pode ser definido como um exemplo.

.page-header {
  &__title {
    tamanho da fonte: 2.0rem;
    cor: $color-preto;
    fundo: $color-white;
  }

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

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

CLASSES DE UTILIDADE

Enquanto trabalhávamos com a metodologia BEM, reparámos que, para realizar uma operação muito simples - por exemplo, colocar uma parte do texto a negrito - tínhamos de inventar nomes de classes CSS artificiais:

.page-header {
  &__bolder-item {
    peso da fonte: negrito;
  }
}

Para eliminar este problema, inspirámo-nos nas classes "utilities" utilizadas no código fonte da estrutura Bootstrap. Graças a isso, no código dos modelos Vue/HTML, podemos utilizar o seguinte tipo:

<div>
  <span class="text-bold">Conteúdo</span>
</div>

ANÁLISE ESTÁTICA DO CÓDIGO

Não é preciso convencer ninguém de que trabalhar com um código transparente e com estruturas consistentes permite modificar e acrescentar facilmente novas funcionalidades. É importante que qualquer pessoa que comece a trabalhar num fragmento de código existente consiga encontrá-lo rapidamente. No entanto, muitas vezes os programadores têm os seus próprios hábitos que podem não ser compreendidos por outros equipa membros. É por isso que é tão importante utilizar ferramentas que permitam automatizar a verificação do código. Como parte do Codest, usamos a ferramenta SCSS-LINT para analisar automaticamente um código SCSS, que contém um conjunto de regras predefinidas. Uma das regras mais interessantes e mais restritivas que utilizamos nos nossos projectos pode ser a regra PropertySortOrder, que garante a ordem apropriada dos atributos dentro de uma única classe SCSS.

Imagine as duas partes seguintes do código SCSS:

.item-a {
    tamanho da fonte: 14px;
    cor: #FF00FF;
    margem superior: 10px;
    peso da fonte: negrito;
    cor de fundo: #00FFFF;
    padding: 5px;
    margin-bottom: 10px;
}

.item-b {
    tamanho da fonte: 18px;
    padding: 3px;
    cor de fundo: #00FFFF;
    margin-bottom: 4px;
}

e:

.item-a {
  margem: 10px 0;
  padding: 5px;
  cor de fundo: #00FFFF;
  cor: #FF00FF;
    tamanho da fonte: 14px;
    font-weight: bold;
}

.item-b {
  margin-bottom: 4px;
  padding: 3px;
  cor de fundo: #00FFFF;
    tamanho da fonte: 18px;
}

Ambas as passagens estão corretas, mas a segunda é mais legível. Os atributos relacionados, como as margens e os preenchimentos, são agrupados.

Resumo

É difícil, em poucas frases, dar toda a informação sobre a organização do código CSS nas extensas aplicações web que criamos com a estrutura Codest. Incentivamos todos os nossos leitores a deixarem comentários sobre as ferramentas e boas práticas que utilizam nos vossos próprios projectos.