Three habits to write scalable CSS

Transcript

1. 3habits to
   write
   scalable CSS
   

   View Slide

2. @hugobessaa
   

   View Slide

3. View Slide

4. 360
   properties
   

   View Slide

5. View Slide

6. We must use
   CSS in a
   scalable way
   

   View Slide

7. We won’t be short
   of tasks to
   change our UIs
   

   View Slide

8. We won’t be short
   of tasks to
   change our UIs
   #431
   Add space between
   buttons in the
   billing page
   due tomorrow
   

   View Slide

9. View Slide

10. Best practices
    

    View Slide

11. three
    habits
    

    View Slide

12. When we don’t have
    a north star, we are
    pulled in all
    directions
    

    View Slide

13. View Slide

14. We wish our efforts guide us
    in the correct direction
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. The design will
    always change
    

    View Slide

22. 3habits to
    write
    scalable CSS
    

    View Slide

23. 1give up
    positioning
    control
    

    View Slide

24. Anything
    Anywhere
    

    View Slide

25. View Slide

26. More positioning
    control, less
    reusability
    

    View Slide

27. Chicago
    the windy city
    

    View Slide

28. Chicago
    the windy city
    Figure
    title
    image
    legend
    

    View Slide

29. Chicago
    the windy city
    Campinas
    cidade das andorinhas
    Shanghai
    24 million people
    Tokyo
    東京都
    São Paulo
    terra da garoa
    London
    londinium
    

    View Slide

30. Chicago
    the windy city
    Chicago is an international hub for
    finance, culture, commerce,
    industry, technology,
    telecommunications, and
    transportation. It is the site of the
    creation of the first standardized
    futures contracts at the Chicago
    Board of Trade, which today is the
    largest and most diverse
    derivatives market globally,
    generating 20% of all volume in
    commodities and financial futures.
    

    View Slide

31. Styling components in a way
    that only what’s inside is
    affected makes them more
    reusable
    

    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
    .button + .button
    

    View Slide

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

    View Slide

38. Chicago
    the windy city
    Campinas
    cidade das andorinhas
    Shanghai
    24 million people
    Tokyo
    東京都
    São Paulo
    terra da garoa
    London
    londinium
    

    View Slide

39. Campinas
    dade das andorinhas
    Shanghai
    24 million people
    float? flexbox?
    grid css?
    Not Figure
    business
    

    View Slide

40. 2give up sizing
    control
    

    View Slide

41. Chicago
    the windy city
    Campinas
    cidade das andorinhas
    Shanghai
    24 million people
    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. We don’t have
    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. A technical solution
    always has
    tradeoffs
    

    View Slide

51. 3let the content
    flow
    

    View Slide

52. Chicago
    Chicago is an international hub
    for finance, culture, commerce,
    industry, technology,
    telecommunications, and
    transportation. It is the site of
    the creation of the first
    standardized futures contracts
    at the Chicago Board of Trade,
    which today is the largest and
    most diverse derivatives
    market globally.
    

    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
    Chicago is an international hub for finance, culture, commerce, industry, technology, telecommunications, and transportatio
    the creation of the first standardized futures contracts at the Chicago Board of Trade, which today is the largest and most d
    market globally, generating 20% of all volume in commodities and financial futures.
    

    View Slide

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

    View Slide

57. How to handle
    dynamic content?
    

    View Slide

58. Controlled approach
    

    View Slide

59. Chicago
    Chicago is an international hub for finance, culture, commerce, industry, technology, telecommunicati…
    

    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. This approach might
    force us to refactor
    everything if the
    content changes
    

    View Slide

63. Fluid approach
    

    View Slide

64. Chicago
    Chicago is an international hub for finance, culture, commerce, industry, technology,
    telecommunications, and transportation. It is the site of the creation of the first standardized futures
    contracts at the Chicago Board of Trade, which today is the largest and most diverse derivatives
    market globally, generating 20% of all volume in commodities and financial futures.
    

    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. It might be scary to
    not have control
    

    View Slide

68. CSS is fluid by
    default
    

    View Slide

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

    View Slide

70. Controleed fluid
    approach
    

    View Slide

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

    View Slide

72. 4develop your
    own habits
    

    View Slide

73. Each project is unique
    Each team is unique
    

    View Slide

74. CSS is
    powerful
    

    View Slide

75. 360
    properties
    

    View Slide

76. 1 give up positioning control
    2 give up sizing control
    3 let the content flow
    

    View Slide

77. Chicago
    the windy city
    

    View Slide

78. View Slide

79. View Slide

80. Styling components in a way
    that only what’s inside is
    affected makes them more
    reusable
    

    View Slide

81. View Slide

82. your
    habits
    

    View Slide

83. A technical solution
    always has
    tradeoffs
    

    View Slide

84. We won’t be short
    of tasks to
    change our UIs
    #431
    Add space between
    buttons in the
    billing page
    due tomorrow
    

    View Slide

85. Our habits
    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
    Share
    knowledge
    with your team
    

    View Slide