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
   

   View Slide

2. @hugobessaa
   

   View Slide

3. View Slide

4. 360
   propriedades
   

   View Slide

5. View Slide

6. Precisamos usar
   CSS de forma
   escalável
   

   View Slide

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

   View Slide

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ã
   

   View Slide

9. View Slide

10. Boas práticas
    

    View Slide

11. três
    hábitos
    

    View Slide

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

    View Slide

13. View Slide

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

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. O design nunca vai
    parar de mudar
    

    View Slide

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

    View Slide

23. 1abrir mão do
    posicionamento
    

    View Slide

24. Qualquer coisa
    Qualquer lugar
    

    View Slide

25. View Slide

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

    View Slide

27. Chicago
    the windy city
    

    View Slide

28. Chicago
    the windy city
    Figura
    titulo
    imagem
    legenda
    

    View Slide

29. Chicago
    the windy city
    Campinas
    cidade das andorinhas
    Shanghai
    24 milhões de habitantes
    Tokyo
    東京都
    São Paulo
    terra da garoa
    London
    londinium
    

    View Slide

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.
    

    View Slide

31. Estilizar componentes de fora
    pra dentro os torna mais
    reutilizáveis
    

    View Slide

32. Chicago
    the windy city
    

    View Slide

33. View Slide

34. View Slide

35. Try it for free Talk to sales
    

    View Slide

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

    View Slide

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

    View Slide

38. Chicago
    the windy city
    Campinas
    cidade das andorinhas
    Shanghai
    24 milhões de habitantes
    Tokyo
    東京都
    São Paulo
    terra da garoa
    London
    londinium
    

    View Slide

39. Campinas
    dade das andorinhas
    Shanghai
    24 milhões de habitantes
    float? flexbox?
    grid css?
    Não importa
    para Figura
    

    View Slide

40. 2abrir mão do
    tamanho
    

    View Slide

41. Chicago
    the windy city
    Campinas
    cidade das andorinhas
    Shanghai
    24 milhões de habitantes
    Tokyo
    東京都
    São Paulo
    terra da garoa
    London
    londinium
    

    View Slide

42. Chicago
    the windy city
    width: 200px
    

    View Slide

43. Chicago
    the windy city
    Campinas
    cidade das andorinhas
    London
    londinium
    Tokyo
    東京都
    

    View Slide

44. Chicago
    the windy city
    width: 100%
    

    View Slide

45. Ainda não temos
    Container Queries
    

    View Slide

46. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

51. 3deixar o
    conteúdo fluir
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

54. Chicago
    the windy city
    

    View Slide

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.
    

    View Slide

56. Try it for free now and win a t-shirt
    

    View Slide

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

    View Slide

58. Abordagem
    controlada
    

    View Slide

59. Chicago
    Hoje, a cidade mantém o seu status como um importante polo para a indústria das telecomunicações…
    

    View Slide

60. Try it for free…
    

    View Slide

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
    

    View Slide

62. Esta abordagem
    pode nos forçar a
    refatorar tudo se o
    conteúdo mudar
    

    View Slide

63. Abordagem fluída
    

    View Slide

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.
    

    View Slide

65. Try it for free now
    and win a t-shirt
    

    View Slide

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.
    

    View Slide

67. Pode ser assustador
    não ter controle
    

    View Slide

68. CSS tende pela
    fluidez
    

    View Slide

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

    View Slide

70. Abordagem fluída
    controlada
    

    View Slide

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

    View Slide

72. 4desenvolva
    seus hábitos
    

    View Slide

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

    View Slide

74. CSS é muito
    poderoso
    

    View Slide

75. 360
    propriedades
    

    View Slide

76. 1 abrir mão do posicionamento
    2 abrir mão do tamanho
    3 deixar o conteúdo fluir
    

    View Slide

77. Chicago
    the windy city
    

    View Slide

78. View Slide

79. View Slide

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

    View Slide

81. View Slide

82. seus
    hábitos
    

    View Slide

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

    View Slide

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ã
    

    View Slide

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
    

    View Slide

86. View Slide

87. telnyx.com/careers
    

    View Slide

88. Obrigado campinas
    

    View Slide