Three habits to write scalable CSS

Transcript

1. 3habits to write scalable CSS
2. @hugobessaa
4. 360 properties
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
10. Best practices
11. three habits
12. When we don’t have a north star, we are pulled in all directions
14. We wish our efforts guide us in the correct direction
21. The design will always change
22. 3habits to write scalable CSS
23. 1give up positioning control
24. Anything Anywhere
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
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
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
80. Styling components in a way that only what’s inside is affected makes them more reusable
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