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.

Transcript

1. 3hábitos para escrever CSS escalável
2. @hugobessaa
4. 360 propriedades
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ã
10. Boas práticas
11. três hábitos
12. Quando não temos um guia, somos puxados para todos os lados
14. Queremos que nossos esforços nos levem na direção correta
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
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
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
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
80. Estilizar componentes de fora pra dentro os torna mais reutilizáveis
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
87. telnyx.com/careers
88. Obrigado campinas