O documento discute como o CSS, apesar de ser frequentemente subestimado, ainda é uma tecnologia valiosa e poderosa. Apresenta diversos recursos avançados do CSS, como variáveis, blend modes, grid layout, e destaca que o CSS3 continua em desenvolvimento com novas funcionalidades. Defende que aprender os fundamentos do CSS é importante para desenvolvedores web.
2. Designer, desenvolvedora front-end há mais
de 10 anos. Co-fundadora do estúdio Haste.
Organizadora da Comunidade WordPress.
hastedesign.com.br
@anyssaferreira
Anyssa Ferreira
3.
4. Algumas perguntas:
● Quem começou, ou está começando a desenvolver
apenas com HTML e CSS puro?
● Quem lida com HTML e CSS constantemente?
● Quem trabalha com web mas não sabe Javascript ou
linguagens back-end?
6. Isso é verdade.
CSS não é linguagem de programação, mas
uma linguagem de marcação de estilos.
Possui sintaxe, metodologias e até funções.
Portanto, não deixa de ser código, só porque
não envolve operações lógicas.
7. O CSS é
subestimado
de 2 formas:
CSS é muito fácil
e pouco poderoso
CSS é muito difícil
e problemático
8. Consequências:
Código excessivo ou verboso para resolver questões simples;
Uso de JavaScript ou imagens desnecessários;
Código fora de padrões, desorganizado ou com erros;
!important, !important, !important! (seletores ruins)
15. Num mercado onde são criados novos
frameworks, ferramentas, pacotes, kits a
cada minuto, uma linguagem básica como
o CSS pode parecer obsoleta ou inútil,
quando na verdade continua sendo a base
em que se apoia toda essa pirâmide.
16. E assim como a linguagem CSS é
subestimada, quem trabalha com ela
começa a questionar a validade de suas
habilidades técnicas.
19. Principais fundamentos do CSS:
Lista de estudo:
● Cascata, herança e seletores;
● Propriedade display: principais diferenças entre os valores;
● Float, Flex e Grid - diferenças e aplicações;
● Técnicas obsoletas - site em tabelas, float para layouts, uso de imagens para
efeitos simples, como cantos arredondados e gradientes, etc.;
● Nomeação de elementos de forma semântica e organizada;
● Boas práticas e metodologias (BEM, OOCSS, SMACSS, etc);
20. SASS e outros
pré-processadores estendem
as capacidades do CSS
Adicionam recursos de linguagens de programação, como
variáveis, loops, arrays, mixins, condicionais, etc.
23. CSS Variables
(Custom
Properties)
:root {
--my-color: #488cff;
}
.my-button {
background-color: var(--my-color);
}
“Nomes de propriedades com o
prefixo --, representam
propriedades personalizadas
que contém um valor que pode
ser reutilizado por todo o
documento usando a função
(var).”
https://developer.mozilla.org/pt-BR/docs/We
b/CSS/--*
25. currentColor
:root {
--my-color:;
}
.my-button {
color: #488cff;
border-color: currentColor;
}
Variável que puxa a cor usada na
propriedade color do elemento
atual, para ser usada em outra
propriedade.
Exemplo: fazer a borda do botão
ter a mesma cor do texto. Mesma cor do texto
27. mix-blend-mode .div {
mix-blend-mode: darken;
}
Define o modo de mesclagem
(como no Photoshop) do
elemento com relação aos
outros que estão “abaixo” da
camada atual.
https://css-tricks.c
om/reverse-text-c
olor-mix-blend-mo
de/
30. cal( )
.my-div {
width: calc( 100% - 80px );
}
Função que permite executar
operações matemáticas com
números até de unidades
diferentes.
Exemplo: subtrair 80px de 100%
da largura da tela.
80px
80px
32. position: sticky;
.my-sidebar {
position: stick;
top: 30px;
}
Um elemento com essa
propriedade, fica fixo dentro dos
limites do elemento pai
enquanto a página é rolada.
Exemplo: barra lateral fixa
enquanto o conteúdo rola. Mas
ao chegar no rodapé, a barra
lateral rola junto com o
conteúdo.
https://dev.to/claireparker/how-to-make-a-sticky-sidebar-
with-two-lines-of-css-2ki7
34. CSS Grid
.my-div {
display: grid;
grid-template-columns: repeat( 6, 1fr);
grid-template-rows: repeat( 3, 90px);
grid-gap: 20px;
}
Módulo do CSS3 para layout.
Conjunto de novas funções,
propriedades, unidades para
definição de colunas e linhas, e
posicionamento de elementos
dentro do grid.
35. Mathieu Inspired by [Justin Avery’s CodePen] https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/