Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS - Cansei de Ser Subestimado

54 views

Published on

Palestra apresentada no meetup Code Like a Girl - Nergirlz

Published in: Internet
  • Be the first to comment

  • Be the first to like this

CSS - Cansei de Ser Subestimado

  1. 1. Cansei de Ser Subestimado C S S Anyssa Ferreira @anyssaferreira
  2. 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. 3. 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?
  4. 4. E principalmente, Quem já ouviu a famosa frase “CSS (e HTML) nem é programação”?
  5. 5. 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.
  6. 6. O CSS é subestimado de 2 formas: CSS é muito fácil e pouco poderoso CSS é muito difícil e problemático
  7. 7. 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)
  8. 8. Vamos fazer um teste.
  9. 9. Você já sentiu que nunca vai aprender tudo que precisa sobre desenvolvimento web?
  10. 10. Você já sentiu que seu conhecimento sobre web não é suficiente?
  11. 11. Que as coisas mudam muito rápido na web?
  12. 12. A cada 5 minutos surge uma nova tecnologia e te assusta? próximo framework da moda
  13. 13. Cansei de Ser Subestimado(a) C S S Você também pode estar sofrendo de CSS...
  14. 14. 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.
  15. 15. E assim como a linguagem CSS é subestimada, quem trabalha com ela começa a questionar a validade de suas habilidades técnicas.
  16. 16. CSS:CANSEIDESERSUBESTIMADO CSS:CANSEIDESERSUBESTIMADO Afinal, aprender CSS “puro” ainda é válido em 2019? ???
  17. 17. Sim. Aprenda os fundamentos do CSS.
  18. 18. 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);
  19. 19. 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.
  20. 20. CSS:CANSEIDESERSUBESTIMADO CSS:CANSEIDESERSUBESTIMADO Algumas capacidades do CSS “raiz” que nem todo mundo conhece E onde habitam.
  21. 21. CSS Variables (Custom Properties)
  22. 22. 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/--*
  23. 23. currentColor (variável)
  24. 24. 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
  25. 25. mix-blend-mode e background-blend-mode
  26. 26. 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/
  27. 27. 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
  28. 28. calc( ) (função)
  29. 29. 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
  30. 30. position: sticky;
  31. 31. 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
  32. 32. CSS Grid Layout
  33. 33. 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.
  34. 34. Mathieu Inspired by [Justin Avery’s CodePen] https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/
  35. 35. https://www.hastedesign.com.br/eventos/css-gri d-o-modulo-do-css3-para-layouts/ CSS Grid Layout
  36. 36. Truques de CSS https://www.hastedesign.com.br/eventos/truque s-de-css/
  37. 37. CSS:CANSEIDESERSUBESTIMADO CSS:CANSEIDESERSUBESTIMADO Mais recursos vindo por aí O CSS3 ainda está em desenvolvimento
  38. 38. Novas funções à caminho
  39. 39. Sass: .element { .sub-element { [styles...] } } .element .sub-element {} CSS Nesting (aninhamento)
  40. 40. Resumindo:
  41. 41. FIM @anyssaferreira www.hastedesign.com.br

×