Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Hugo

May 04, 2019
Tweet

More Decks by Hugo

Other Decks in Programming

Transcript

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

    View Slide

  2. @hugobessaa

    View Slide

  3. 360

    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