Três hábitos para escrever CSS escalável

C30935608bc34b1c854293de06c13c89?s=47 Hugo
May 04, 2019

Três hábitos para escrever CSS escalável

Conforme construímos todos os estilos de um novo site, é bem comum chegarmos em um momento que nosso CSS não é mais tão escalável. Refatorações constantes, mudanças de frameworks, e estilos não relacionados quebrados sem você saber. Existem três hábitos que você pode seguir enquanto escreve CSS que te ajudarão a evitar essas dores de cabeça. Nessa palestra vamos explorar cada um deles e mais uma boa quantidade de dicas práticas para que você possa finalmente escrever CSS que escala. 1) Abrir mão do espaçamento; 2) Abrir mão do posicionamento; 3) Deixar o conteúdo fluir.

C30935608bc34b1c854293de06c13c89?s=128

Hugo

May 04, 2019
Tweet

Transcript

  1. 3hábitos para escrever CSS escalável

  2. @hugobessaa

  3. 360

  4. 360 propriedades

  5. None
  6. Precisamos usar CSS de forma escalável

  7. Não vão faltar tasks para alterar a interface

  8. Não vão faltar tasks para alterar a interface #431 Adicionar

    espaço entre botões na página de faturamento para amanhã
  9. None
  10. Boas práticas

  11. três hábitos

  12. Quando não temos um guia, somos puxados para todos os

    lados
  13. None
  14. Queremos que nossos esforços nos levem na direção correta

  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. O design nunca vai parar de mudar

  22. 3hábitos para escrever CSS escalável

  23. 1abrir mão do posicionamento

  24. Qualquer coisa Qualquer lugar

  25. None
  26. Quanto mais controle do posicionamento, menos reutilizável

  27. Chicago the windy city

  28. Chicago the windy city Figura titulo imagem legenda

  29. Chicago the windy city Campinas cidade das andorinhas Shanghai 24

    milhões de habitantes Tokyo 東京都 São Paulo terra da garoa London londinium
  30. Chicago the windy city Hoje, a cidade mantém o seu

    status como um importante polo para a indústria das telecomunicações, transporte e infra-estrutura, com o Aeroporto Internacional O'Hare, sendo o segundo aeroporto mais movimentado, em termos de movimentos de tráfego, em todo o mundo. Em 2008, a cidade recebeu 45,6 milhões de visitantes nacionais e estrangeiros.
  31. Estilizar componentes de fora pra dentro os torna mais reutilizáveis

  32. Chicago the windy city

  33. None
  34. None
  35. Try it for free Talk to sales

  36. Try it for free Talk to sales .botao + .botao

  37. Try it for free Talk to sales .botao + .botao

  38. Chicago the windy city Campinas cidade das andorinhas Shanghai 24

    milhões de habitantes Tokyo 東京都 São Paulo terra da garoa London londinium
  39. Campinas dade das andorinhas Shanghai 24 milhões de habitantes float?

    flexbox? grid css? Não importa para Figura
  40. 2abrir mão do tamanho

  41. Chicago the windy city Campinas cidade das andorinhas Shanghai 24

    milhões de habitantes Tokyo 東京都 São Paulo terra da garoa London londinium
  42. Chicago the windy city width: 200px

  43. Chicago the windy city Campinas cidade das andorinhas London londinium

    Tokyo 東京都
  44. Chicago the windy city width: 100%

  45. Ainda não temos Container Queries

  46. None
  47. .header:media( min-width: 300px )

  48. .header:media( min-width: 300px )

  49. .header--narrow .header--wide

  50. Uma solução técnica sempre tem desvantagens

  51. 3deixar o conteúdo fluir

  52. Chicago Hoje, a cidade mantém o seu status como um

    importante polo para a indústria das telecomunicações, transporte e infra-estrutura, com o Aeroporto Internacional O'Hare, sendo o segundo aeroporto mais movimentado, em termos de movimentos de tráfego, em todo o mundo. Em 2008, a cidade recebeu 45,6 milhões de visitantes nacionais e estrangeiros.
  53. Mariahilferstrasse Die Straße besteht aus der inneren und äußeren Mariahilfer

    Straße. Diese nicht offiziellen Bezeichnungen werden dennoch umgangssprachlich, aber auch von den Medien sowie bei Verkehrsdurchsagen oder U- Bahn- Stationsaufgangsbeschriftunge n verwendet, um zwischen den Teilstücken innerhalb und außerhalb des Gürtels zu unterscheiden. Mitunter wird jedoch Mariahilfer Straße als Synonym für die Einkaufsstraße
  54. Chicago the windy city

  55. Chicago Hoje, a cidade mantém o seu status como um

    importante polo para a indústria das telecomunicações, transporte e infra-es Aeroporto Internacional O'Hare, sendo o segundo aeroporto mais movimentado, em termos de movimentos de tráfego, em Em 2008, a cidade recebeu 45,6 milhões de visitantes nacionais e estrangeiros.
  56. Try it for free now and win a t-shirt

  57. Como lidar com conteúdo dinâmico?

  58. Abordagem controlada

  59. Chicago Hoje, a cidade mantém o seu status como um

    importante polo para a indústria das telecomunicações…
  60. Try it for free…

  61. Mariahilferstrasse Die Straße besteht aus der inneren und äußeren Mariahilfer

    Straße. Diese nicht offiziellen Bezeichnungen werden dennoch umgangssprachlich, aber auch von den Medien sowie bei Verkehrsdurchsagen oder U- Bahn- Stationsaufgangsbeschriftunge n verwendet, um zwischen den Teilstücken innerhalb und außerhalb des Gürtels zu unterscheiden. Mitunter wird jedoch Mariahilfer Straße als Synonym für die Einkaufsstraße
  62. Esta abordagem pode nos forçar a refatorar tudo se o

    conteúdo mudar
  63. Abordagem fluída

  64. Chicago Hoje, a cidade mantém o seu status como um

    importante polo para a indústria das telecomunicações, transporte e infra-estrutura, com o Aeroporto Internacional O'Hare, sendo o segundo aeroporto mais movimentado, em termos de movimentos de tráfego, em todo o mundo. Em 2008, a cidade recebeu 45,6 milhões de visitantes nacionais e estrangeiros.
  65. Try it for free now and win a t-shirt

  66. Mariahilferstrasse Die Straße besteht aus der inneren und äußeren Mariahilfer

    Straße. Diese nicht offiziellen Bezeichnungen werden dennoch umgangssprachlich, aber auch von den Medien sowie bei Verkehrsdurchsagen oder U-Bahn- Stationsaufgangsbeschriftungen verwendet, um zwischen den Teilstücken innerhalb und außerhalb des Gürtels zu unterscheiden. Mitunter wird jedoch Mariahilfer Straße als Synonym für die Einkaufsstraße innerhalb des Gürtels verwendet.
  67. Pode ser assustador não ter controle

  68. CSS tende pela fluidez

  69. smashingmagazine.com/2018/08/flexbox-alignment/

  70. Abordagem fluída controlada

  71. overflow-wrap: break-word; min-width: 200px; max-width: 700px;

  72. 4desenvolva seus hábitos

  73. Cada projeto é único Cada time é único

  74. CSS é muito poderoso

  75. 360 propriedades

  76. 1 abrir mão do posicionamento 2 abrir mão do tamanho

    3 deixar o conteúdo fluir
  77. Chicago the windy city

  78. None
  79. None
  80. Estilizar componentes de fora pra dentro os torna mais reutilizáveis

  81. None
  82. seus hábitos

  83. Uma solução técnica sempre tem desvantagens

  84. Não vão faltar tasks para alterar a interface #431 Adicionar

    espaço entre botões na página de faturamento para amanhã
  85. Nossos hábitos laboriosam fuga minus amet soluta omnis nesciunt aut

    rerum deleniti sunt cupiditate voluptatum porro harum doloribus dolorum doloremque et vel et ut labore et molestiae consectetur ex commodi minima dolor omnis ut iure rem minus voluptatem fuga ipsam culpa eum reiciendis quae quos nulla corporis rem sint dolorem et ap aperi Compartilhe aprendizado com o seu time
  86. None
  87. telnyx.com/careers

  88. Obrigado campinas