Three habits to write scalable CSS

Three habits to write scalable CSS

C30935608bc34b1c854293de06c13c89?s=128

Hugo

May 04, 2019
Tweet

Transcript

  1. 3habits to write scalable CSS

  2. @hugobessaa

  3. 360

  4. 360 properties

  5. None
  6. We must use CSS in a scalable way

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

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

    #431 Add space between buttons in the billing page due tomorrow
  9. None
  10. Best practices

  11. three habits

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

    in all directions
  13. None
  14. We wish our efforts guide us in the correct direction

  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. The design will always change

  22. 3habits to write scalable CSS

  23. 1give up positioning control

  24. Anything Anywhere

  25. None
  26. More positioning control, less reusability

  27. Chicago the windy city

  28. Chicago the windy city Figure title image legend

  29. Chicago the windy city Campinas cidade das andorinhas Shanghai 24

    million people Tokyo 東京都 São Paulo terra da garoa London londinium
  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.
  31. Styling components in a way that only what’s inside is

    affected makes them more reusable
  32. Chicago the windy city

  33. None
  34. None
  35. Try it for free Talk to sales

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

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

  38. Chicago the windy city Campinas cidade das andorinhas Shanghai 24

    million people Tokyo 東京都 São Paulo terra da garoa London londinium
  39. Campinas dade das andorinhas Shanghai 24 million people float? flexbox?

    grid css? Not Figure business
  40. 2give up sizing control

  41. Chicago the windy city Campinas cidade das andorinhas Shanghai 24

    million people 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. We don’t have Container Queries

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

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

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

  50. A technical solution always has tradeoffs

  51. 3let the content flow

  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.
  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 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.
  56. Try it for free now and win a t-shirt

  57. How to handle dynamic content?

  58. Controlled approach

  59. Chicago Chicago is an international hub for finance, culture, commerce,

    industry, technology, telecommunicati…
  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. This approach might force us to refactor everything if the

    content changes
  63. Fluid approach

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

  68. CSS is fluid by default

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

  70. Controleed fluid approach

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

  72. 4develop your own habits

  73. Each project is unique Each team is unique

  74. CSS is powerful

  75. 360 properties

  76. 1 give up positioning control 2 give up sizing control

    3 let the content flow
  77. Chicago the windy city

  78. None
  79. None
  80. Styling components in a way that only what’s inside is

    affected makes them more reusable
  81. None
  82. your habits

  83. A technical solution always has tradeoffs

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

    #431 Add space between buttons in the billing page due tomorrow
  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