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 full-size slide

  2. 360
    propriedades

    View full-size slide

  3. Precisamos usar
    CSS de forma
    escalável

    View full-size slide

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

    View full-size slide

  5. 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 full-size slide

  6. Boas práticas

    View full-size slide

  7. três
    hábitos

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. O design nunca vai
    parar de mudar

    View full-size slide

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

    View full-size slide

  12. 1abrir mão do
    posicionamento

    View full-size slide

  13. Qualquer coisa
    Qualquer lugar

    View full-size slide

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

    View full-size slide

  15. Chicago
    the windy city

    View full-size slide

  16. Chicago
    the windy city
    Figura
    titulo
    imagem
    legenda

    View full-size slide

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

    View full-size slide

  18. 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 full-size slide

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

    View full-size slide

  20. Chicago
    the windy city

    View full-size slide

  21. Try it for free Talk to sales

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 2abrir mão do
    tamanho

    View full-size slide

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

    View full-size slide

  28. Chicago
    the windy city
    width: 200px

    View full-size slide

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

    View full-size slide

  30. Chicago
    the windy city
    width: 100%

    View full-size slide

  31. Ainda não temos
    Container Queries

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. .header--narrow
    .header--wide

    View full-size slide

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

    View full-size slide

  36. 3deixar o
    conteúdo fluir

    View full-size slide

  37. 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 full-size slide

  38. 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 full-size slide

  39. Chicago
    the windy city

    View full-size slide

  40. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  43. Abordagem
    controlada

    View full-size slide

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

    View full-size slide

  45. Try it for free…

    View full-size slide

  46. 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 full-size slide

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

    View full-size slide

  48. Abordagem fluída

    View full-size slide

  49. 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 full-size slide

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

    View full-size slide

  51. 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 full-size slide

  52. Pode ser assustador
    não ter controle

    View full-size slide

  53. CSS tende pela
    fluidez

    View full-size slide

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

    View full-size slide

  55. Abordagem fluída
    controlada

    View full-size slide

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

    View full-size slide

  57. 4desenvolva
    seus hábitos

    View full-size slide

  58. Cada projeto é único
    Cada time é único

    View full-size slide

  59. CSS é muito
    poderoso

    View full-size slide

  60. 360
    propriedades

    View full-size slide

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

    View full-size slide

  62. Chicago
    the windy city

    View full-size slide

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

    View full-size slide

  64. seus
    hábitos

    View full-size slide

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

    View full-size slide

  66. 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 full-size slide

  67. 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 full-size slide

  68. telnyx.com/careers

    View full-size slide

  69. Obrigado campinas

    View full-size slide