Dúvidas e Dicas sobre CSS

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 é:

  1. Saber o que um seletor faz só olhando pra ele.
  2. Ter uma ideia de onde um seletor pode ser usado só olhando para ele.
  3. 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:
image

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 "

Qualquer dúvida, ou quem puder adicionar mais dicas abaixo, só adicionar !!!

7 Likes

Uma ótima fonte de conteúdo sobre CSS é o CSS Tricks! Sempre aborda alguns workarounds e features bem legais de se implementar numa página.

1 Like

Uma ótima fonte de conteúdo sobre CSS é o CSS Tricks! Sempre aborda alguns workarounds e features bem legais de se implementar numa página.

1 Like

Para quem deseja dar um “UP” no seu designer, super recomendo a adição de “SVGS”, um site que utilizo normalmente é: https://fontawesome.com/

2 Likes

Caprichou no conteúdo! Valeu!!

1 Like