Se você está se perguntando como utilizar classes em CSS e HTML, você está no lugar certo. Sendo um tópico introdutório de CSS e HTML, meu intuito neste artigo é abordar da maneira mais simples possível como funcionam as classes e como utilizá-las no seu projeto.
Classes são seletores CSS. Utilizaremos seletores CSS para estilizar elementos no HTML, usando o atributo "class", por exemplo: <div class="blue"></div> em referência à uma classe CSS blue.
Ainda confuso? Fique tranquilo(a). Você vai entender o conceito logo à seguir.
O que são classes CSS?
Se você está familiarizado com programação, sabe que quase todas as linguagens de programação, como Java, PHP, Pyhon, etc. implementam classes em suas sintaxes. A boa notícia é que CSS é muito mais fácil.
Em CSS o conceito de classes é um pouco diferente, já que CSS não se parece nada com as linguagens citadas acima.
Primeiramente, CSS é uma linguagem que serve para estilizar sites. Ela descreve como deve ser a aparência dos elementos HTML em uma página web, e faz isso através de seletores.
Entenda seletores como palavras-chave com regras específicas que "selecionam" determinados elementos HTML em uma página, para poder atribuir uma aparência diferente à esses elementos.
Por exemplo, existem seletores CSS para selecionar tags HTML, tags com ids específicos, ex: <div id="footer"></div>, classes ex: <div class="footer"></div>, tags dentro de tags, entre outras regras mais específicas. Veja o exemplo a seguir:
<style>
div {
color: red;
}
</style>
<div>Teste</div>
O código CSS acima define um CSS selector "div", que vai selecionar todas as tags div na página e pintar o texto de vermelho.
Classes em CSS são simplesmente seletores. A sintaxe a ser utilizada é um ponto "." seguido de uma palavra-chave, e em seguida a definição dos estilos entre "{" e "}". Veja o exemplo a seguir:
<style>
.bordered {
border: 2px solid black;
}
</style>
<div class="bordered"></div>
Formas de se utilizar classes CSS
Como visto no parágrafo acima, classes CSS são fundamentalmente seletores. É possível combinar classes CSS de diversas maneiras. Veja abaixo alguns exemplos:
<style>
.blue {
color: blue;
}
</style>
<div class="blue">Texto em azul</div>
<a href="#" class="blue">Texto em azul</a>
No exemplo acima, qualquer tag que receba a classe "blue", deve conter o texto em azul.
<style>
div.blue {
color: blue;
}
</style>
<div class="blue">Texto em azul</div>
<a href="#" class="blue">Texto em preto, apesar da classe em azul</a>
No exemplo acima, a div vai ter o texto azul, mas o link não vai, pois o seletor CSS foi descrito de tal forma que combina a tag "div" com a classe ".blue", portanto aplicando o estilo somente na tag div que contém a classe "blue".
<style>
.blue-text {
color: blue;
}
.black-background {
background: black;
}
</style>
<div class="blue-text black-background">Texto azul, fundo preto</div>
<a href="#" class="blue-text">Texto azul</a>
O código acima demonstra que é possível definir múltiplas classes ao mesmo tempo, e utilizar múltiplas classes na mesma tag ao mesmo tempo. Desta forma você pode escrever uma série de estilos e reaproveitá-los apenas usando classes diferentes, separando por espaço no atributo HTML "class".
Essa é a maior utilidade de definirmos classes. Algumas bibliotecas CSS como o bootstrap, por exemplo, fazem uso disso o tempo todo.
Dicas úteis sobre classes e seletores
Se você está começando com CSS, saiba que já cobrimos o suficiente sobre classes especificamente. Porém você pode ainda estar em dúvida sobre diferentes aplicações de classes, seletores que possa ter visto em algum trecho de código, etc.
O primeiro ponto que eu quero que você saiba é que classes são simples de implementar e são só isso que foi demonstrado no parágrafo anterior. Outras questões que envolvem CSS podem te trazer dúvida, mas no fim das contas a sintaxe e funcionamento de CSS é bastante simples. O que trava a maioria das pessoas é decorar as propriedades de estilização e fazer com que a página tenha exatamente a aparência esperada. Mas isso tudo se resume a prática.
Aqui vão algumas dicas sobre classes e seletores CSS que podem te ajudar bastante:
Procure aprender os principais seletores CSS: Seletores de classe: .classe, id: #id, tag: div, atributo: input[type="text"], bem como o funcionamento de hierarquia desses seletores, são conceitos diferentes e importantes de se aprender. Isso precisa ficar para outro artigo, mas uma vez que você entende e decora os conceitos básicos, entendendo que classes fazem parte desses conceitos básicos, CSS vai ficar muito fácil de entender.
Seletores CSS funcionam para JavaScript e jQuery: Já se perguntou por que em jQuery usamos $('#container'), por exemplo? A ideia por trás do jQuery vem justamente dos seletores CSS. A biblioteca torna fácil a seleção de elementos por id, classe, nome da tag, etc, através de seletores CSS. O mesmo pode ser atingido através da função document.querySelectorAll('#container') em puro JavaScript.
Utilize um padrão para nomes de classes: Além de ser importante descrever o que cada classe significa, por exemplo, usar uma palavra-chave .bordered para um elemento que tenha bordas. É recomendável também sempre manter um padrão na nomenclatura de classes. Eu recomendo sempre o uso de "slug case", usando sempre letras minúsculas, substituindo espaços por traços "-", exemplo: .is-centered para um container com propriedade text-align: center.
Tire vantagem de combinações de classes: Vai ter elementos com as mesmas características na mesma página ou em múltiplas páginas diferentes? Então você pode definir um estilo para esse grupo de características. Por exemplo, digamos que você tem um menu lateral com uma sombra que é a mesma sombra de uma seção "leia mais" no rodapé da página. Você então pode criar uma classe .card-shadow que contém a sombra e outras possíveis características comuns que vários elementos compartilham, assim você reduz a quantidade de código CSS e cria uma estrutura de estilos semântica.
Recomendações finais
Apesar do CSS aceitar o uso de outros tipos de seletores, como # para ids, é recomendável que você utilize classes ao invés de ids para a definição de estilos entre CSS e HTML.
O intuito principal de classes em CSS e HTML é poder reutilizar o mesmo código para múltiplos elementos que compartilham o mesmo estilo.
Para que isso aconteça, tente manter suas classes organizadas em seu código CSS para sempre poder lembrar que uma classe já existe para determinado estilo e evitar recriar classes que fazem a mesma coisa.
Uma dica aqui é usar /* Comentários CSS */ para definir diferentes seções no seu arquivo CSS, como uma seção que define classes de tipografia, outra seção que define classes de botões, outra seção que defina classes para menu, cabeçalho, rodapé e assim por diante.
