O que é CSS? Cascading Style Sheets, Responsive CSS, Sassy CSS, Compress, Minify, Unminify, Uncompress Tool

O que são folhas de estilo em cascata (CSS)?

Douglas Karr Quinta-feira, fevereiro 9, 2023

1 104 4 minutos lidos

Leia abaixo para obter uma explicação completa de como as folhas de estilo em cascata funcionam. Exibimos nossos aplicativos na parte superior da página para facilitar a localização e o uso. Se você está lendo este artigo por e-mail ou feed, clique para comprima seu CSS.

A menos que você esteja realmente desenvolvendo sites, você pode não compreender totalmente as folhas de estilo em cascata (CSS). CSS é uma linguagem de folha de estilo usada para descrever a aparência e a formatação de um documento escrito em HTML or XML. CSS pode ser usado para especificar os estilos de vários elementos, como fonte, cor, espaçamento e layout. O CSS permite separar a apresentação do seu documento HTML de seu conteúdo, facilitando a manutenção e atualização do estilo visual do seu site.

Estrutura da Linguagem CSS

O seletor é o elemento HTML que você deseja estilizar e o propriedade e valor defina os estilos que deseja aplicar a esse elemento:

selector {
  property: value;
}

Por exemplo, o seguinte CSS fará com que todos <h1> os elementos em uma página têm uma cor vermelha e um tamanho de fonte de 32px:

CSS

h1 {
  color: red;
  font-size: 32px;
}

saída

Título

Você também pode especificar CSS para um ID exclusivo em um elemento:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

saída

Intro

Ou aplique uma classe em vários elementos:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

saída

Eu quero realçar uma palavra na tag span.

Você pode incluir CSS em seu documento HTML de três maneiras:

CSS embutido, usando o style atributo em um elemento HTML

CSS interno, usando um <style> elemento no <head> do seu documento HTML
CSS externo, usando um arquivo .css separado vinculado ao seu documento HTML usando o <link> elemento no <head> do seu documento HTML

CSS responsivo

O CSS é incrivelmente flexível e pode ser usado para ajustar a exibição de elementos com base na resolução da tela, para que você possa ter o mesmo HTML, mas construí-lo responsivo para a resolução do dispositivo:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

Compressão CSS

Você pode ver no exemplo acima que há um comentário, uma consulta de mídia e vários estilos que usam espaços e feeds de linha para organizar a exibição do CSS. É uma ótima prática minificar ou compactar seu CSS em seu site para reduzir o tamanho dos arquivos e, consequentemente, o tempo necessário para solicitar e renderizar seu estilo. Não é uma quantia pequena... você pode ver uma economia de mais de 50% em alguns dos exemplos acima.

Muitas configurações de servidor oferecem ferramentas que compactam automaticamente o CSS em tempo real e armazenam em cache o arquivo minificado para que você não precise fazer isso manualmente.

O que é SCSS?

CSS atrevido (SCSS) é um pré-processador CSS que adiciona funcionalidade e sintaxe adicionais à linguagem CSS. Ele estende os recursos do CSS permitindo o uso de variáveis, mixins, funções e outros recursos que não estão disponíveis no CSS padrão.

Vantagens do SCSS

Manutenibilidade aprimorada: com o uso de variáveis, você pode armazenar valores em um só lugar e reutilizá-los em toda a sua folha de estilo, facilitando a manutenção e atualização de seus estilos.
Melhor organização: Com mixins, você pode agrupar e reutilizar conjuntos de estilos, tornando sua folha de estilo mais organizada e fácil de ler.
Maior funcionalidade: O SCSS inclui muitos recursos não disponíveis no CSS padrão, como funções, estruturas de controle (por exemplo, if/else) e operações aritméticas. Isso permite um estilo mais dinâmico e expressivo.
Melhor desempenho: os arquivos SCSS são compilados em CSS, o que pode melhorar o desempenho reduzindo a quantidade de código que precisa ser analisado pelo navegador.

Desvantagens do SCSS

Curva de aprendizado: o SCSS tem uma sintaxe diferente do CSS padrão e você precisará aprender essa nova sintaxe antes de poder usá-la efetivamente.
Complexidade adicional: embora o SCSS possa tornar sua folha de estilo mais organizada e fácil de manter, ele também pode introduzir complexidade adicional em sua base de código, especialmente se você não estiver familiarizado com os novos recursos e a sintaxe.
Ferramentas: Para usar SCSS, você precisará de um compilador para traduzir seu código SCSS em CSS. Isso requer configuração e ferramentas adicionais, o que pode ser uma barreira de entrada para alguns desenvolvedores.

Neste exemplo abaixo, o código SCSS faz uso de variáveis para armazenar valores ($primary-color e $font-size) que pode ser reutilizado em toda a folha de estilo. O código CSS gerado a partir desse código SCSS é equivalente, mas não inclui as variáveis. Em vez disso, os valores das variáveis são usados diretamente no CSS.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Outro recurso do SCSS demonstrado neste exemplo são os estilos aninhados. No código SCSS, o h1 estilos são aninhados dentro do body estilos, o que não é possível no CSS padrão. Quando o código SCSS é compilado, os estilos aninhados são expandidos em estilos separados no código CSS.

No geral, o SCSS oferece muitas vantagens sobre o CSS padrão, mas é importante considerar as vantagens e desvantagens e escolher a ferramenta certa para seu projeto com base em suas necessidades e restrições.