Aqui, tô montando um conteúdo para iniciantes e não iniciantes sobre CSS. Quem precisar ou tiver dicas para passar, só mandar nos comentários, vamos todos nos ajudar!
**Nomenclatura CSS que vai te poupar horas **
CSS não é a “linguagem” mais bonita, mais tem alimentado com sucesso o estilo na web por mais de 2 decádas.
Entretanto, enquanto você escreve mais CSS, você rapidamente vê uma grande desvantagem.
É difícil de arrumar e manter o CSS.
CSS mal escrito rapidamente vai virar um pesadelo.
Aqui abaixo estão algumas convenções de nomenclatura que vão poupar um pouco de estresse e inúmeras horas a menos de linha.
**Use sequências delimitadas por hífen **
.classeDoHeader {
jeitoerrado
}
.class-do-header {
jeito certo
}
Temos também o BEMCSS
O que é BEM? (não é o mal, desculpem ^^ )
O BEM é um acrônimo para Bloco , Elemento e Modificador . Esses são os 3 pilares do padrão BEM, tendo cada um seu significado, sua função e regras próprias de escrita.
Existem 3 problemas que as convenções CSS tentam resolver, que é:
- Saber o que um seletor faz só olhando pra ele.
- Ter uma ideia de onde um seletor pode ser usado só olhando para ele.
- Conhecer as relações entre nomes de classe, simplesmente olhando para eles.
E aí chegamos no que é o BEM
Block(bloco) → é um “bloco de construção” de uma aplicação; uma abstração mais geral, com seu próprio significado. (Imagine um circulo ou globo)
Element(Elemento) → faz parte de um Bloco; é um elemento-filho. Um Elemento não tem função/significado independente e está semanticamente vinculado ao seu respectivo Bloco.(imagine um triângulo). Sintaxe: Nome do Bloco + 2 underlines + nome do Elemento
Modifier(modificador) → é um, modificador propriamente dito. (imagine um “estado” como “big” ou “small”). nome de um Bloco ou Modificador + 2 hífens + o nome do Modificador
Uma sintaxe simplifificada do BEM é: block__element–modifier
.circulo__triangulo--big {
SEU CSS AQUI
}
Considere agora o exemplo da imagem abaixo:
O bloco principal/global é o “.card” ;
Os elementos que estão dentro desse bloco são: " .card__title , .card__title, .card__description e .card__button "
e também podemos ter modificadores como: " .card__button–disabled "