Especificidade

• O id é mais específico que uma classe que, por sua vez,
  é mais específica que um elemento
  • Estilo inline
    • Precedência máxima
  • Id
    • Maior precedência após o estilo inline
  • Classe, pseudo classe, atributo
    • Maior precedência após o id
  • Elemento, pseudo elemento
    • Maior precedência após Classe, pseudo classe ou atributo

Herança

• Elementos herdam estilos de seus containers
• Se body tiver color: red, todos os textos dentro
  dele serão vermelhos, exceto se configurados com outro
  color
• Nem todas as propriedades são herdadas. Margins e
  paddings são um exemplo

inherit

• Valor que define que a propriedade será herdada de seu
  container

Exemplo de propriedades herdadas do container (pai):

p {
  margin: inherit;
  padding: inherit;
}

Resets

• Reduzem a inconsistência de renderização de elementos
  entre browsers
• Tende a deixar o código redundante, caso não seja avaliado
  quais propriedades são realmente necessárias
  • Alguns resets, contém, por exemplo, elementos de correções
    de bugs de browsers antigos como o IE6/7. Inútil caso a
    aplicação não pretende dar suporte a estes navegadores
  • Font-size geralmente costuma ter que ser reescrito

css reset

normalize

Text

text-transform: uppercase;

• Transforma todas as letras do texto em maiúsculas

text-transform: lowercase;

• Transforma todas as letras do texto em minúsculas

text-transform: capitalize;

• Transforma todas as iniciais das palavras em maiúsculas

Unidades de medida

• Unidades relativas, como em e rem, permitem que os
  elementos de um layout sejam escaláveis, pois se adaptam
  naturalmente

%

• Corresponde ao valor do width do elemento pai

em

• Corresponde ao font-size do pai do elemento em questão
• Caso algum elemento pai não tenha o font-size definido,
  corresponde ao valor de font-size do browser, que, por
  padrão, é em média 16px
• Favorece a usabilidade, por ser uma medida relativa
• Fórmula para o cálculo de um em: target / context = result
  • target: valor do font-size do elemento
  • context: valor do font-size do pai/container

Truque de css para facilitar a conversão de px para em:

• É possível ajustar o font size padrão do browser, para que
  12px passe a equivaler a 1.2em, por exemplo

body {
  font-size: 62.5%; /* fonte alterada pra 10px */
}

em em margins e paddings

• Quando usado em margins e paddings, corresponde ao
  font-size do próprio elemento em questão
• Ao ser aplicado em um padding de uma div, por exemplo,
  o espaço interno da div será adaptado ao font-size dela

rem

• Root em
• Corresponde ao elemento :root do HTML
• Foi criado para consertar o problema de escalabilidade dos
  elementos com em's

rem em margins, paddings e widths

• Sempre consistente, sempre corresponde ao font-size do
  elemento root do HTML
• Caso o font-size do browser seja aumentado, o elemento
  com o width em rem será redimensionado proporcionalmente

Combinando em e rem de forma atômica

• Se o font-size de um botão estiver em rem e todas as outras
  unidades de medida deste botão estiverem em em (paddings,
  border, border-radius, etc), os componentes da estrutura deste botão estarão associados a ele mesmo
• Resumindo: rem em text nodes e em em componentes anexados
  aos text nodes

Combinando margins e paddings com em e rem

• Em botões, por exemplo, ao ajustar o font-size do botão,
  se o padding estiver com em, esse padding irá se ajustar
  automaticamente ao tamanho da fonte, ou seja,
  as proporções são mantidas
• Ainda em botões, caso a margin esteja setada em rem,
  haverá um espaço consistente em qualquer lugar em que os
  botões forem aplicados

width

• Especifica a largura do elemento
• Não se aplica a elementos inline
• As propriedades min-width e max-width sobrescrevem a
  propriedade width
• Medidas de valores:
  • px
  • em
  • rem
  • %
  • %
• Valores:
  • auto - Valor default. O elemento ajustará, automaticamente,
    sua largura para permitir que seu conteúdo seja exibido
    corretamente
  • % - O valor do elemento é relativo à largura de seu container

min-width

• Define a largura mínima do elemento
• Sempre sobrescreve a propriedade width, independentemente se
  for declarada antes ou depois
• Default: min-width: 0;
• Se a largura mínima for maior que a largura do elemento,
  min-width será aplicada
  • Se a viewport for menor que a largura mínima, uma barra de
    rolagem será gerada
• Se a largura mínima for menor que a largura do elemento,
  min-width não terá efeito

Position

position: static;

• Posicionamento padrão
• Não altera o elemento caso seja retirado
• O elemento é posicionado abaixo/após o elemento anterior,
  desde que este tenha display block
• Não permite que a posição do elemento seja definida

position: absolute;

• Posiciona o elemento em relação ao seu container, caso
  o container tenha um position definido
• Se o position do container não for diferente do static
  (padrão), posiciona o elemento considerando o browser
• Tira o elemento do fluxo do documento

position: relative;

• Posiciona o elemento em relação a si mesmo
• Mesmo quando deslocado, o seu lugar no fluxo do documento
  é preservado
• O ponto 0 é o canto superior esquerdo

position: fixed;

• Fixa o elemento e o posiciona em relação à janela do browser

z-index

• Só funciona se a propriedade position do elemento tiver um valor
  diferente de static
• Altera o eixo x do elemento

Display

display: block;

• Ocupa 100% da largura da tela, por padrão
• Aceita propriedades de largura e altura
• Ocupa a linha inteira, não deixa outros elementos ocuparem
  a mesma linha que ele

display: inline;

• Permite que os elementos fiquem lado-a-lado
• Não aceita largura ou altura
• Ganha o comportamento de uma palavra, ou seja, existe um espaço
  de alguns pixels entre cada elemento (palavra)
• Esse comportamento de palavra só é retirado caso não haja quebra
  de linha nas tags do elemento, ou comentário entre elas (permitindo
  a quebra de linha)
• A propriedade text-align irá posicionar os elementos, caso
  seja especificada no container deles

display: inline-block;

• Junção dos comportamentos inline e block
• Coloca um elemento ao lado de outro
• Considera altura e largura
• Também ganha comportamento de uma palavra, como no inline
• text-align também irá posicionar os elementos, caso seja
  especificada no container deles

Margin

margin-left: auto;

• Posiciona o elemento no canto direito da tela

margin: 0 auto;

• Posiciona o elemento no centro horizontal da tela

Pseudo-elementos

:after

• Sintaxe: nomeTag:after
• Cria um pseudo-elemento
• Adiciona um elemento dentro da tag informada no seletor
• O elemento que ele adiciona sempre será o último dentro da tag
• O texto através da propriedade content deve ser apenas
  um atrativo visual

Box model

box-sizing

• Propriedade usada para alterar a propriedade padrão da box
  model, usada para calcular larguras e alturas dos elementos

border-box

• Valor usado para que o padding e border de um elemento
  sejam considerados na altura e largura de um elemento
• Desconsidera a propriedade margin

Prefixes / prefixos

• Propriedades que ainda estão em testes nos navegadores
  precisam de prefixos

Exemplos:

• -webkit- (Chrome, Safari, versões mais recentes do Opera.)
• -moz- (Firefox)
• -o- (Versões antigas do Opera)
• -ms- (Internet Explorer)

Autoprefixer

• Plugin do PostCSS que parseia o CSS e adiciona prefixos
• Se baseia no Can I use

Transform

• Propriedade que permite que um elemento seja manipulado
  visualmente, através de inclinação, rotação, traslado ou
  dimensionamento
• Não faz com que outros elementos flutuem ao seu redor,
  ou seja, os sobrepõe
• Aceita a especificação de multiplos valores, separados
  por um espaço
• O valor que se encontra à frente será realizado antes
  do valor posterior

transform: valor1() valor2();

transform-origin: value;

• É uma propriedade usada em conjunto com o transform
• Permite a mudança do ponto de origem de um transform
• O default da origem de um transform é "50% 50%", ou seja,
  exatamente no centro do elemento
• Pode receber 2 valores separados por espaço, em caso
  de transformações 2d
  • Em transformações 3d, recebe 3 valores
• Os valores podem ser top, left, right, bottom
  e center
  • O primeiro valor é a posição horizontal
  • O segundo, a vertical
  • O terceiro, o eixo Z
    • Só funciona caso o elemento possua transforms 3d
    • Não pode ser uma porcentagem

transform-origin: bottom right;

3D transform

• A maioria das propriedades abaixo possuem sua versão 3d

Scale

transform: scale(xxTimes);

• Valor que faz com que o elemento seja redimensionado
  em relação ao número de vezes passado por parâmetro
• Aplica-se às propriedades font-size, padding,
  height, e width
• É um atalho para scaleX() e scaleY()

.my-div:hover {
  transform: scale(2); 
  /* no hover, faz com que o elemento tenha 2x suas dimensões originais */
}

transform: scale(x, y);

• Parâmetro x estica o elemento horizontalmente
• Parâmetro y estica o elemento verticalmente

.my-div:hover {
  transform: scale(4, .5);
  /* no hover, o elemento terá 4x sua largura e metade de sua altura */
}

transform: scaleX(xTimes)

• Faz com que o elemento tenha x vezes sua largura original

transform: scaleY(xTimes)

• Faz com que o elemento tenha x vezes sua altura original

transform: scale3d(sx, sy, sz) / scaleZ(value)

• Afeta a escala ao longo do eixo Z, linha imaginária que
  sai da tela em direção ao usuário

Skew

transform: skewX(xxdeg) e transform: skewY(xxdeg)

• Inclina um elemento para a esquerda ou direita
• Ambas funções precisam ser usadas, pois não há atalho
  para este valor
• Pode, por exemplo, inclinar um quadrado para a esquerda,
  com o skewX()

.my-div {
  width: 50px;
  height: 50px;
  background-color: red;
  margin: 50px auto 0;
  transform: skewX(-45deg);
}

Translate

transform: translate(tx, ty), transform: translateX(value), transform: translateY(value)

• Move o elemento lateralmente ou para cima e para baixo,
  à partir de seu canto superior esquerdo
• Valores são especificados em unidades de medida padrão
  do css, negativos ou positivos
• Valor x positivo move o elemento para a direita
• Valor y positivo move o elemento para baixo

transform: translate3d(x, y, z) / translateZ(value)

• Move o elemento em direção ao usuário
  • Aceita valores negativos

Rotate

transform: rotate()

• Rotaciona o elemento no sentido horário, à partir de sua
  posição atual
  • Valores negativos rotacionam no sentido anti-horário

transform: rotateX()

• Rotaciona o elemento em torno do eixo horizontal

transform: rotateY()

• Rotaciona o elemento em torno do eixo vertical

transform: rotateZ()

• Rotaciona o elemento em torno do eixo Z

transform: perspective(value)

• Não afeta o elemento em si, mas as propriedades transform
  3d dos elementos descendentes, permitindo que elas tenham uma
  profundidade consistente de perspectiva

Matrix

transform: matrix()

• Combina todas as transformações em uma

Perspective

transform: perspective()

• Não afeta o próprio elemento, mas afeta os elementos com
  transforms com valores 3D, permitindo que todos eles tenham
  uma constante profundade de perspectiva

box-shadow

• Funde sombras em elementos do tipo block
• Recebe 5 valores, separados por espaço
  1. Horizontal offset
  • Positivo significa que a sombra estará à direita do
    elemento
  • Negativo, leva a sombra para o lado esquerdo
  2. Vertical offset
  • Negativo traz a sombra para cima do elemento
  • Positivo, para baixo
  3. Blur radius
  • Opcional
  • 0 faz com que a sombra seja não tenha desfoque
  • Quanto maior o valor, mais desfocada será a sombra
  4. Spread radius
  • Opcional
  • Valores positivos aumentam o tamanho da sombra
  • Negativos, diminuem
  • 0 é o valor default, a sombra é do mesmo tamanho
    do desfoque
  5. Color

div{
  box-shadow: 0 15px 20px -10px #b1b1b1;
}

• Inner shadow

div {
  box-shadow: inset 0 0 10px black;
}

rgba()

• Valor que recebe 4 parâmetros separados por vírgula
• O 4º parâmetro indica o quanto a cor do elemento
  terá de opacidade

div {
  background-color: rgba(255, 0, 0, .1); /* 10% de opacidade */
}

• Ao contrário da propriedade opacity, o rgba não
  afeta os elementos filhos

background

• Propriedade que permite manipular o background de
  qualquer elemento
• É uma propriedade de atalho, ou seja, permite que várias
  propriedades sejam escritas dentro dela
• É composta de 8 propriedades separadas por espaço:
  • background-image
  • background-position
  • background-size
  • background-repeat
  • background-attachment
  • background-origin
  • background-clip
  • background-color
• As propriedades podem ser combinadas na quantidade necessária,
  contudo, a ordem de declaração é a referência acima
• Tudo o que não é especificado na propriedade background
  é setado como default
  • Se há uma instrução background-color: red em uma linha e,
    abaixo dela, uma instrução background: url(./texture.jpg), o
    background do elemento será transparente

.my-div {
  background: 
    url(./img/my-img.jpg)    /* image */
    top center / 200px 200px /* position / size */
    no-repeat                /* repeat */
    fixed                    /* attachment */
    padding-box              /* origin */
    content-box              /* clip */
    red;                     /* color */
}

Múltiplos backgrounds

• Empilha os backgrounds do elemento
  • Possibilita uma camada de png acima de um gradiente,
    por exemplo
• As propriedades relacionadas aos backgrounds são
  separadas por vírgula
  • Cada valor na lista separada por vírgula corresponde
    às respectivas camadas de background
• Vale para múltiplos gradientes, separados por vírgula

.my-div {
  background: 
    url(./img/my-logo.png), 
    url(./img/my-second-png.png), 
    linear-gradient(ro right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom right, left; /* posicionou apenas as 2 camadas de imagens */
}

background-image(url, url)

• Propriedade que aplica um gráfico (PNG, SVG, JPG, GIF, WEBP)
  ou gradiente ao background de um elemento
  • Aplica-se a todos os elementos
• Uso de imagens: background-image: url(./image-path-here.extension);
• Pode ser usada para fazer sprites de imagens
  • Método que pode reduzir o número de requisições HTTP
• Especificar um background-color para ser usado se uma imagem não
  estiver disponível. Imagens de fundo são renderizadas sobre a cor
  de fundo
• Aceita múltiplas imagens e/ou degradês por parâmetro, separados
  por vírgula
  • Comumente necessita de mais valores para que os backgrounds
    se posicionem corretamente
• background-color como fallback
  • Se um background-image ou gradiente não for carregado, o browser irá procurar um background-color como fallback
    • Neste caso, o recomendado é especificar a imagem primeiro
      e depois a cor de fallback

background-color como fallback:

background: url(sweettexture.jpg) blue;

múltiplas imagens:

body {
  background:
    url(logo.png) bottom center no-repeat,
    url(background-pattern.png) repeat;
}

linear-gradient(color, color)

• Aceita duas ou mais cores por parâmetro, separadas por vírgula
• Valores aceitos
  • XXdeg como primeiro parâmetro
    • Inclina xx graus
    • Sentido horário
    • to top ou 0deg
    • to bottom ou 180deg
    • to left ou 270deg
    • to right ou 90deg
  • <color-stop>
    • O gradiente começa em XX% da linha do gradiente
• Suportam transparências rgba()

.my-div {
  background: linear-gradient(blue, #222);
}

.my-div {
  background: linear-gradient(45deg, red, blue);
}

.my-div {
  background: linear-gradient(135deg, orange, orange 60%, cyan);
}

.my-div {
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
}

radial-gradient(color, color)

• Inicia em um único ponto e emana para fora
• Comumente usados para simular iluminação
  • Faz com que o gradiente pareça mais natural
• O valor default faz com que a cor do primeiro parâmetro
  se inicie no centro e se desvaneça para a cor final em
  direção às bordas do elemento
  • O desvanecimento acontece em um ritmo igual, não
    importa em qual direção
• circle closest-side
  • Ao contrário do parâmetro default (ellipse), faz
    com que o desvanecimento termine como um espaço
    separando o valor da forma
• circle at top right
  • Posiciona o círculo no background

.my-div {
  background: radial-gradient(white, black);
}

.my-div {
  background: radial-gradient(circle closest-side, white, black);
}

.my-div {
  background: radial-gradient(circle at bottom right, white, black);
}

Gradientes cônicos

• Similar aos gradientes radiais, é circular e usa o centro do
  elemento como ponto de origem para as paradas de cores
• Contudo, enquanto a parada de cor de um gradiente radial emerge
  do centro do círculo, o gradiente cônico insere as cores ao redor
  do círculo
• Têm esse nome devido a parecer a forma de um cone visto por cima
• Ainda não suportado pelos browsers

.my-div {
  background: conic-gradient(#fff, #000);
}

repeating-linear-gradient()

• O tamanho do gradiente é determinado pelo fim da cor final
  • Se for 20px, o tamanho do gradiente, que se repete, será
    20px x 20px quadrados

.my-div {
  background: repeating-linear-gradient(45deg, blue, yellow 10px, red 10px, red 20px);
}

repeating-radial-gradient()

• Segue a mesma lógica de repetição do gradiente linear

.my-div {
  background: repeating-radial-gradient(
    circle at 0 0, 
    #ccc, 
    white 50px
  );
}

background-position: x y;

• Seta a posição inicial de uma imagem ou gradiente, relativa
  ao background-origin
• Valores default posicionam a imagem no topo esquerdo do container
• Possíveis valores:
  • Palavras-chave top (0% y), bottom (100% y), left (0% x),
    right (100% x), center (50% x e y)
  • Porcentagem 25% 75%
    • 50% significa o alinhamento do meio da imagem com o meio
      do container
    • 100% significa o alinhamento do último pixel da imagem
      com o último pixel do container
  • Múltiplas imagens 0 0, center
  • Considerando a borda bottom 10px right 20px
• Caso apenas um valor seja declarado, ele será o valor x e o
  browser irá setar o valor y como center
• Aceita até quatro valores, incluindo qualquer uma das
  palavras-chave, exceto center
  • background-position: right 45px bottom;
    • O background será posicionado à 45px da borda direita e
      0px à parte inferior do container
  • background-position: right 10px bottom 20px;
    • Posiciona o background à 10px à direita da borda e à 20px
      da parte inferior do container
  • Neste formato, a palavra-chave sempre deve preceder a
    unidade de medida

.container {
  width: 700px;
  height: 700px;
  background: url(./img/pug.png) no-repeat #ffda8f ;
  background-position: 100% 100%;
}

background-size

• Propriedade que possui muitas variações e diferentes
  sintaxes, todas com diferentes casos de uso
• Ao ser usada com o shothand background, vir após a
  propriedade background-position, que deve ser especificada
• Há 4 diferentes sintaxes possíveis para esta propriedade:
  • keywords sintax
    • Além do valor padrão, (auto), há 2 keywords possíveis
      • auto calcula, automaticamente, a medida baseada no
        tamanho atual da imagem e proporção
        • Mantém a proporção da imagem inalterada (exemplo 3)
    • 
    • cover
      • Diz ao browser que a imagem sempre irá cobrir todo
        o container, mesmo que a imagem tenha que ser esticada
        (proporcionalmente) ou ultrapasse os limites do container
        (exemplo 1)
    • contain
      • Sempre mostra toda a imagem, proporcionalmente, mesmo
        que deixe espaço em um dos lados ou em baixo (exemplo 2)
  • one-value sintax
    • Configura a largura. A altura permanece auto
    • Qualquer unidade de medida CSS pode ser utilizada (exemplo 4)
  • two-values sintax (exemplo 5)
    • Valor 1: seta a largura da imagem
    • Valor 2: seta a altura da imagem
    • Qualquer unidade de medida pode ser utilizada
    • Pode distorcer a imagem
  • multiple background sintax (exemplo 6)
    • Permite combinar qualquer um dos valores acima
      e aplicá-los à multiplas imagens, apenas adicionando
      vírgula entre cada sintaxe

.container {
  /* ... */
  background: url(img/t11.png) top / cover no-repeat;
}

.container {
  /* ... */
  background: url(img/t11.png) top / contain no-repeat;
}

.container {
  /* ... */
  background: url(img/t11.png) top / auto no-repeat;
}

.container {
  /* ... */
  background: url(img/t11.png) top left / 95% no-repeat;
}

.container {
  /* ... */
  background: url(img/t11.png) top / 95% 75% no-repeat; /* position / size */
}

.container {
  background: 
    url(img/pug.png) top / contain no-repeat, /* position / size */
    url(img/t11.png) bottom / contain no-repeat /* position / size */
  ;
}

background-repeat

• Se uma propriedade background-image é especificada,
  background-repeat define se e como essa imagem será
  repetida (exemplo 1)
• Possíveis valores:
  • repeat: ladrilha a imagem em ambas as direções,
    x e y. É o valor default
  • repeat-x: repete a imagem horizontalmente
  • repeat-y: repete a imagem verticalmente
  • no-repeat: mostra a imagem apenas uma vez
  • space: ladrilha a imagem em ambas as direções (x, y). Nunca corta a imagem, a menos que uma única imagem seja
    muito grande para encaixar. Se múltiplas imagens podem
    ser encaixadas, elas serão espaçadas de forma com que
    toquem as bordas (exemplo 2)
  • round: ladrilha a imagem em ambas as direções, nunca
    corta a imagem, a menos que uma única imagem seja muito
    grande para encaixar. Se múltiplas imagens podem ser
    encaixadas e há espaço sobrando, esmaga ou estica as
    imagens para que elas se encaixem no espaço (exemplo 3)
• Possibilita a passagem de 2 valores:
  background-repeat: round space (exemplo 4)

exemplo 1:

.container {
  background: url(./img/pug.png);
  background-repeat: repeat-x;
}

exemplo 2:

.container {
  width: 1500px;
  height: 800px;
  background: url(./img/pug.png);
  background-repeat: space;
  background-color: red;
}

exemplo 3:

.container {
  /* ... */
  background: url(./img/pug.png);
  background-repeat: round;
  background-color: red;
}

exemplo 4:

background-atachment

• Especifica como mover o background em relação ao viewport
• Valores possíveis:
  • scroll: valor default. O background acompanha o scroll.
    • O background é fixo em relação ao próprio elemento, e
      não rola com os conteúdos do background. É efetivamente
      anexado à borda do elemento
  • fixed: faz com que o background não role ao scrollar
    a página

background-origin

• Define onde o background será exibido: em todo o elemento,
  dentro da borda ou dentro do padding
• Valores possíveis:
  • border-box - exemplo 1: o background é posicionado
    relativo ao border-box
  • content-box - exemplo 2: o background é posicionado
    relativo ao content-box
  • padding-box - exemplo 3: o background é posicionado
    relativo ao padding-box
  • inherit
• Similar ao background-clip, mas redimensiona o background
  ao invés de cortá-lo
• É ignorado caso o background-attachment possua o valor fixed

exemplo 1:

.container {
  height: 500px;
  width: 500px;
  border: 20px solid rgba(0,0,0, .3);
  background: url(./img/pug.png);
  background-repeat: no-repeat;
  background-origin: border-box;
}

exemplo 2:

.container {
  height: 500px;
  width: 500px;
  border: 20px solid rgba(0,0,0, .3);
  background: url(./img/pug.png);
  background-repeat: no-repeat;
  background-origin: content-box;
  background-color: red;
}

exemplo 3:

.container {
  height: 500px;
  width: 500px;
  border: 30px solid rgba(0,0,0, .3);
  padding: 40px;
  background: url(./img/pug.png);
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-color: red;
}

background-clip

• Define o quanto o fundo deve se estender dentro do elemento
  • Valores:
    • border-box - Valor padrão. Permite que o background se
      estenda completamente ao longo do elemento, mesmo sob a borda
      (exemplo 1)
    • padding-box - O background se estende apenas até o limite
      da borda do elemento (exemplo 2)
    • content-box - O background se estende apenas no limite do
      conteúdo. Não inclui o preenchimento nem a borda (exemplo 3)
    • text - O background é renderizado apenas no interior do
      texto em primeiro plano (exemplo 4).
      • No momento em que este texto foi escrito, ainda é uma api
        experimental. Não deve ser usada no código em produção

exemplo 1:

.container {
  height: 300px;
  width: 500px;
  border: 10px dashed rgba(0, 0, 0, .5);
  background-color: #05ffb0;
  background-clip: border-box;
}

exemplo 2:

.container {
  height: 300px;
  width: 500px;
  padding: 50px;
  border: 10px dashed rgba(0, 0, 0, .5);
  background-color: #05ffb0;
  background-clip: padding-box;
}

exemplo 3:

.container {
  height: 300px;
  width: 500px;
  padding: 80px 40px;
  border: 10px dashed rgba(0, 0, 0, .5);
  background-color: #05ffb0;
  background-clip: content-box;
}

exemplo 4:

.container {
  width: 500px;
  background: linear-gradient(yellow, red);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

background-color

• Aplica cores sólidas ao background do elemento
• Valores:
  • transparent - Default. Não há cor no background
  • colorName - colors
  • #82a43a - Hexadecimais
  • rgb(50, 115, 220); - RGB
  • rgba(50, 115, 220, 0.3); - RGBA. 3 primeiros valores são do RGB.
    O 4º valor é para o canal alpha, define a opacidade da cor. Pode ir
    do 0 (transparente) até o 1 (opaco)
  • hsl(14, 100%, 53%); - HSL
  • hsla(14, 100%, 53%, 0.6); - HSLA

A metodologia BEM

• BEM (Block, Element, Modifier)
• Convenção que sugere uma forma estruturada de nomear classes css
• Passamos mais tempo lendo código do que escrevendo
  • Quanto mais claro, simples e legível, melhor
• O nome das classes é baseado na proposta do elemento em si
  • Não usar id ou tag como seletor
    • Id prejudica o conceito de reutilização
  • Não nomear classes baseadas no estado ou estilo
• Referencias:
  • en.bem.info
  • Edgard Kozlowski - CSS Legível e escalável com BEM CSS - RSV Dev Summit 2017

Block

• Estrutura:
  • block-name ou block
• Componente reutilizável
• Não deve influenciar seu ambiente, ou seja, a geometria externa (margin,
  posicionamento) não deve ser definida nele
  • Isso garante a independência do bloco, possibilitando que ele seja
    movido de um local para outro e, portanto, tornando-se reutilizável
• Seu código pode ser reutilizado e não depende de componentes de
  outras páginas sendo implementados
• Podem ser aninhados, em quantos níveis forem necessários (exemplo 1)
• Não é dependente da página. Exemplos:
  • Card do produto
  • Header
  • Nav
  • Sidebar
  • Botão
• Para prevenir que possíveis bibliotecas a serem usadas no projeto
  causem conflito entre nomes de classes, é possível utilizar, nos blocos
  um prefixo com o nome do projeto abreviado
  • Exemplo: rm-header

exemplo 1:

  <!-- 'header' block -->
  <header class="header">
    <!-- nested 'logo' block -->
    <div class="logo"></div>
    <!-- nested 'search-form' block -->
    <form class="search-form"></form>
  </header>

Element

• Estrutura:
  • block-name__element-name
  • O nome do elemento é separado do nome do bloco por 2 underscores
    (exemplo 1)
• Parte que compõe um bloco e não pode ser usada separada dele
  • Um elemento é sempre dependende de seu bloco
  • É uma parte do todo
  • Sempre faz parte de um bloco, não deve ser usado fora dele
• Seu nome é baseado em seu propósito, e não em seu estado
• Podem ser aninhados, em quantos níveis forem necessários (exemplo 3)
  • E a estrutura do bloco, no css, será sempre representada como uma
    lista de elementos, segundo a metodologia BEM (exemplo 4)
  • Isso permite que a estrutura do bloco seja modificada sem que
    seja necessário mudar o código de cada elemento (exemplo 5)
    • E estrutura do bloco muda, mas as regras css para cada
      elemento e seus nomes continuam os mesmos
• É sempre parte de um bloco, e não de outro elemento
  • Ou seja, o nome do elemento não pode definir uma hierarquia
    como block__elem1__elem2 (exemplo 2)

exemplo 1:

<!-- 'search-form' block -->
<form class="search-form">
  <!-- 'input' element in the 'search-form' block -->
  <input class="search-form__input">
  <!-- 'button' element in the 'search-form' block -->
  <button class="search-form__button">Search</button>
</form>

exemplo 2 (estrutura incorreta):

<form class="search-form">
  <div class="search-form__content">
    <input class="search-form__content__input">
    <button class="search-form__content__button">search</button>
  </div>
</form>

exemplo 3:

<div class="block">
    <div class="block__elem1">
        <div class="block__elem2">
            <div class="block__elem3"></div>
        </div>
    </div>
</div>

exemplo 4:

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

exemplo 5:

<div class="block">
    <div class="block__elem1">
        <div class="block__elem2"></div>
    </div>

    <div class="block__elem3"></div>
</div>

Modifier

• Estrutura:
  • block-name_modifier_name ou block-name__element-name_modifier_name
  • O nome do modifier é separado do nome do bloco ou do elemento por
    1 underscore
  • Não pode ser usado sozinho
• Uma entidade que define a aparência, estado ou comportamento de
  um bloco ou elemento Exemplos:
  • Aparência:
    • Tamanho
    • Theme
  • Estado:
    • Disabled
    • Focused
  • Comportamento:
    • Direção (directions_left-top)

Tipos de modificadores

Boolean:

• Usados apenas quando a ausência ou a presença do modificador é
  importante, e seu valor é irrelevante, por exemplo, disabled
• Estrutura do nome completo de um modificador:
  • block-name_modifier-name
  • block-name__element-name_modifier-name
• Se um modificador booleano é especificado, presupõe-se que
  seu valor seja true (exemplo 1)

exemplo 1:

<!-- the 'search-form' block has the 'focused' boolean modifier -->
<form class="search-form search-form_focused">
  <input class="search-form__input">
  
  <!-- the 'button' element has the 'disabled' boolean modifier -->
  <button class="search-form__button search-form__button_disabled">search</button>
</form>

Key-value:

• Usado quando o valor do modificador é importante, por exemplo,
  um menu com o tema 'islands' (exemplo 1)
• Estrutura:
  • block-name_modifier-name_modifier-value
  • block-name__element-name_modifier-name_modifier-value

exemplo 1:

<form class="search-form search-form_theme_islands">

</form>

exemplo 2, botão que tem o modificador 'size' com o valor 'm':

<button class="block-name__button block-name__button_size_m">

Mix

• Técnica utilizada para usar diferentes entidades em um único DOM node
• Permite:
  • Combinar o comportamento e estilo de múltiplas entidades, sem
    duplicar o código
  • Cria, semanticamente, um novo componente da interface, baseado
    em um já existente (exemplo 1)

exemplo 1:

<!-- the 'header' block -->
<header class="header">
 <!-- 'search-form' block is mixed with the 'search-form' element from the 'header' block -->
 <div class="search-form header__search-form"></div>
</header>

<!-- 
- Neste exemplo, foram combinados os estilos e comportamentos do bloco  
'search-form' e do elemento 'search-form' do bloco 'header'
- Essa abordagem permite setar a geometria externa e posicionamento  
no elemento 'header__search-form'
- O bloco 'search-form' permanece universal 
- Ou seja, é possível usar o bloco em qualquer outro ambiente, pois  
ele não contém padding 
-->

Estrutura de pastas e arquivos

• A abordagem de componentes do BEM também é aplicada a estrutura de
  pastas e arquivos
• A implementação de blocos, elementos e modificadores é dividida de
  forma independente das tecnologias usadas e seus respectivos arquivos,
  ou seja, blocos, elementos e modificadores podem ser conectados
  individualmente
• Características:
  • Um único bloco corresponde a uma única pasta
  • O bloco e a pasta possuem o mesmo nome
    • Exemplos:
      • O bloco 'header' está na pasta header/
      • O bloco 'menu' está na pasta menu/
  • A implementação de um bloco é dividida em arquivos de tecnologias
    diferentes
    • Exemplos:
      • header.css
      • header.js
  • A pasta do bloco é a pasta root para as subpastas de seus elementos
    e modificadores
  • Nomes de pastas de elementos começam com um duplo underscore __
    • Exemplos:
      • __header/
      • __logo/
      • __menu/
      • __item/
  • Nomes de pastas de modificadores começam com um único
    underscore _
    • Exemplos:
      • header/_fixed/
      • menu/_theme_islands/
  • Implementações de elementos e modificadores são divididos em
    arquivos de diferentes tecnologias
    • Exemplos:
      • header__input.js
      • header_theme_islands.css
• Essa estrutura de arquivos pressupõe que, na produção, o código
  será desenvolvido em arquivos de projeto compartilhados.

Exemplo de estrutura:

search-form/                           # Pasta do bloco search-form

    __input/                           # Subpasta do elemento search-form__input
        search-form__input.css         # Implementação CSS do 
                                       # elemento search-form__input 
        search-form__input.js          # Implementação JS do 
                                       # elemento search-form__input 

    __button/                          # Subpasta do elemento 
                                       # search-form__button
        search-form__button.css
        search-form__button.js

    _theme/                            # Subpasta do modificador 
                                       # search-form_theme
        search-form_theme_islands.css  # Implementação CSS do bloco search-form 
                                       # que tem o modificador theme com o valor 
                                       # islands
        search-form_theme_lite.css     # Implementação CSS do bloco search-form 
                                       # que tem o modificador theme com o valor 
                                       # lite

    search-form.css                    # Implementação CSS do bloco search-form 
    search-form.js                     # Implementação JS do bloco search-form 

Before and After pseudo elements explained - part one: how they work

Before e After são boas maneiras de se adicionar estilos extras à uma
aplicação web, evitando a adição de marcações desnecessárias de CSS.

Exemplo inicial com um parágrafo no meio da página:

<body>

  <p>conteúdo genérico aqui</p>

</body>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
}

É possível então selecionar os pseudo-elementos desse parágrafo: ::before
e ::after.

É possível selecionar o pseudo-elemento de um elemento com a sintaxe:

p::before {
  
}

Lembrando que pseudo-elementos são representados com ::, enquanto
pseudo-classes são representadas com :.

Um pseudo-elemento só existe e funciona quando sua primeira linha é
um content:

p::before {
  content: '';
}

Agora, será feito com que esse pseudo-elemento tenha um comportamento de
bloco, cor de fundo vermelha, altura e largura de 10px.

p::before {
  content: '';
  background: red;
  display: block;
  width: 10px;
  height: 10px;
}

É importante observar que, no devtools, há um ::before dentro do
<p>:

Portanto, o pseudo-elemento ::before não insere um elemento antes da tag,
mas sim antes do conteúdo da tag.

Se é uma <div>, um pseudo-elemento será inserido antes do conteúdo da
div.

O mesmo vale para o pseudo-elemento ::after.

/* ... */
p::after {
  content: '';
  background: red;
  display: block;
  width: 10px;
  height: 10px;
}

É importante saber que pseudo-elementos não funcionam em imagens.