Fundo

Cascading Style Sheets (CSS) é uma ferramenta poderosa usada para estilizar páginas da web.

O CSS permite a separação do conteúdo do documento da apresentação do documento, permitindo que os engenheiros estilizem diferentes aspectos das páginas da Web, incluindo: fontes, cores, planos de fundo, layouts e animações, entre outros.

No entanto, escrever CSS que seja sustentável, escalável e de alto desempenho pode ser um desafio, especialmente à medida que os aplicativos da Web crescem em escala e complexidade.

Neste segmento, compartilharei algumas práticas recomendadas de CSS que podem ajudá-lo a escrever um código CSS melhor, com alguns exemplos de código do que fazer e do que não fazer.

A nível pessoal, o CSS causou-me alguma queda de cabelo. Vou salvá-lo do destino que sofri. Apenas leia isto!

Use um pré-processador CSS

Os pré-processadores CSS, como Sass, Less e Stylus, são ferramentas que ajudam a escrever código CSS mais sustentável e escalável.

Esses pré-processadores fornecem recursos como variáveis, mixins, funções e aninhamento, entre outros. Com variáveis, você pode definir valores que são reutilizados em todo o seu código CSS.

Mixins permitem agrupar declarações CSS e reutilizá-las em diferentes partes do seu código.

As funções ajudam você a realizar cálculos e manipular valores. O aninhamento permite que você escreva regras CSS mais específicas e fáceis de ler.

Faça isso ✅

$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: #fff;
}

Não faça isso ❌

.button {
  background-color: #007bff;
  color: #fff;
}

Ao usar um pré-processador CSS, você pode tornar seu código mais conciso e fácil de manter.

Use uma Metodologia CSS

Uma metodologia CSS é um conjunto de diretrizes e convenções que ajudam você a estruturar e organizar seu código CSS.

Uma metodologia fornece uma abordagem consistente para escrever CSS, facilitando o trabalho de vários desenvolvedores na mesma base de código.

Existem várias metodologias CSS, incluindo BEM (Block-Element-Modifier), SMACSS (Scalable and Modular Architecture for CSS) e OOCSS (Object-Oriented CSS), entre outras.

BEM é uma metodologia popular que fornece uma convenção de nomenclatura para classes CSS. A convenção de nomenclatura BEM usa um sublinhado duplo ( __) para separar um bloco e um elemento e um hífen duplo ( --) para separar um bloco ou um elemento e um modificador.

Faça isso ✅

<div class="button button--primary">
  Click Me
</div>

Não faça isso ❌

<div class="primary-button">
  Click Me
</div>

Ao usar uma metodologia CSS, você pode tornar seu código mais consistente, sustentável e fácil de entender.

Use uma redefinição ou normalização de CSS

Diferentes navegadores da web têm diferentes estilos padrão para elementos HTML.

Para garantir que seu código CSS funcione consistentemente em todos os navegadores, você deve usar uma redefinição ou normalização de CSS. Uma redefinição de CSS é um conjunto de regras de CSS que remove todos os estilos padrão dos elementos HTML.

Uma normalização é um conjunto de regras CSS que normalizam estilos em diferentes navegadores.

Faça isso ✅

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />

Não faça isso ❌

body {
  margin: 0;
  padding

Neste segmento, exploramos essas três práticas recomendadas de CSS que podem ajudá-lo a escrever um código CSS melhor, incluindo:

1. Use um pré-processador CSS
2. Use uma metodologia CSS
3. Use uma redefinição de CSS ou normalize

1. Use nomes de classe significativos e descritivos
2. Use propriedades e valores abreviados
3. Evite usar!important
4. Use flexbox ou grade para layouts
5. Minimize o uso de seletores globais
6. Evite usar muitos seletores aninhados
7. Mantenha seu código CSS organizado e sustentável