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.

1. Cansei de
Ser
Subestimado
C
S
S
Anyssa Ferreira
@anyssaferreira

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

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?

5. E principalmente,
Quem já ouviu a famosa frase “CSS (e HTML)
nem é programação”?

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)

9. Vamos fazer um teste.

10. Você já sentiu que
nunca vai aprender
tudo que precisa sobre
desenvolvimento web?

11. Você já sentiu que seu
conhecimento sobre
web não é suficiente?

12. Que as coisas mudam
muito rápido na web?

13. A cada 5 minutos surge
uma nova tecnologia
e te assusta?
próximo framework
da moda

14. Cansei de
Ser
Subestimado(a)
C
S
S
Você também pode estar
sofrendo de CSS...

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.

17. CSS:CANSEIDESERSUBESTIMADO
CSS:CANSEIDESERSUBESTIMADO
Afinal, aprender
CSS “puro” ainda é
válido em 2019?
???

18. Sim.
Aprenda os fundamentos
do CSS.

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.

21. CSS:CANSEIDESERSUBESTIMADO
CSS:CANSEIDESERSUBESTIMADO
Algumas
capacidades do CSS
“raiz” que nem todo
mundo conhece
E onde habitam.

22. CSS Variables
(Custom Properties)

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/--*

24. currentColor (variável)

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

26. mix-blend-mode e
background-blend-mode

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/

28. background-blend-
mode
.div {
background-blend-mode: screen;
}
Define o modo de mesclagem
(como no Photoshop) das
diferentes camadas de plano de
fundo de um elemento.
https://developer.
mozilla.org/en-US/
docs/Web/CSS/ba
ckground-blend-m
ode

29. calc( ) (função)

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

31. position: sticky;

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

33. CSS Grid Layout

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/

36. https://www.hastedesign.com.br/eventos/css-gri
d-o-modulo-do-css3-para-layouts/
CSS Grid Layout

37. Truques de CSS
https://www.hastedesign.com.br/eventos/truque
s-de-css/

38. CSS:CANSEIDESERSUBESTIMADO
CSS:CANSEIDESERSUBESTIMADO
Mais recursos vindo
por aí
O CSS3 ainda está em desenvolvimento

39. Novas funções à
caminho

40. Sass:
.element {
.sub-element {
[styles...]
}
}
.element .sub-element {}
CSS Nesting
(aninhamento)

41. Resumindo:

42. FIM
@anyssaferreira
www.hastedesign.com.br