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

Utility CSS 2019

5fc5804101f0367b6faeee18a6cebe30?s=47 Daniel Fosco
March 18, 2019
Design
0
22

Utility CSS 2019

Updated version of my presentation highlighting the advantages (and pitfalls) of utility-based CSS

5fc5804101f0367b6faeee18a6cebe30?s=128

Daniel Fosco

March 18, 2019
Tweet

More Decks by Daniel Fosco

See All by Daniel Fosco
Let's talk about design portfolios
5fc5804101f0367b6faeee18a6cebe30?s=48 dfosco
3
81
UX Design – What, Why, How
5fc5804101f0367b6faeee18a6cebe30?s=48 dfosco
0
56
Portfolio Talk
5fc5804101f0367b6faeee18a6cebe30?s=48 dfosco
0
74
Utility CSS
5fc5804101f0367b6faeee18a6cebe30?s=48 dfosco
2
55
UX Design – Primeiros Passos
5fc5804101f0367b6faeee18a6cebe30?s=48 dfosco
1
96
CSS Modular — Boas Práticas e Bizus
5fc5804101f0367b6faeee18a6cebe30?s=48 dfosco
1
93

Other Decks in Design

See All in Design
ujeza_final.pdf
5282a03ca032a1f9e0df70c8ef2ea39c?s=48 ujki
0
680
品質向上を目指す開発組織のデザインレビュー / SmartHR
381ea09c5a26fb7d63ddfc3ccb1d746b?s=48 kgsi
3
1.7k
「SPACE DESIGN × DX」 - 店舗・オフィス等の空間DX伴⾛⽀援 -
9105b00a46e39490dceece1a02593cbb?s=48 pointedge
0
290
Overflow - IdentityDeck
88fa9de638d9581ccb33a627b9d2ebf5?s=48 overflowinc
0
2.1k
Similarities Between Building Construction and Software Design Systems
9347fe838093bda2909399174501f24a?s=48 shotakugawa_meijin
0
210
Going in Circles
5968fa9a81cf1cf77a919996b8ed1bc9?s=48 pandemonay
1
110
20220120modelinglt_miure
Dcd6ae6de2452585b6d18137a4e1cd97?s=48 miure
1
250
Oh my teeth | BrandBook Creative for Partners
4a62826362b9e20a715882d4083022e3?s=48 mkt
PRO
0
110
アンドパッドのデザインシステムの今までとこれから
98616aa6b83a1cd3f1c7d22e2e1ad526?s=48 sizucca
2
1.2k
ダークモード対応に困ったときの便利な処方箋 / Color scheme for dark mode
6e6c7132d99fd8febb2193fd21809d20?s=48 featherplain
2
460
Designing for trust: Applying Promise Theory to collaborate effectively with your remote teams
0eb7b7e396243e93a186ba20649d9aa6?s=48 akiramotomura
0
230
デザイン編 Hatena Engineer Seminar #19
7ee8ca88aa7f99cafd91a79f9734668c?s=48 takuwolog
2
610

Featured

See All Featured
What's new in Ruby 2.0
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
336
30k
10 Git Anti Patterns You Should be Aware of
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
638
52k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
125
8.5k
The Most Common Mistakes in Cover Letters
1ce0eb06fd6a9e9566a0cb310cfee635?s=48 jrick
PRO
4
24k
Bash Introduction
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
596
210k
Building a Scalable Design System with Sketch
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
447
30k
5 minutes of I Can Smell Your CMS
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k
The World Runs on Bad Software
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
56
5.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
268
11k
Producing Creativity
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
333
37k
No one is an island. Learnings from fostering a developers community.
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
9
1.1k
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k

Transcript

  1. UTILITY CSS

  2. WHAT

  3. WHAT HOW

  4. WHAT HOW AND WHY

  5. WHAT IS ATOMIC CSS FUNCTIONAL CSS

  6. ATOMIC DESIGN BRAD FROST

  7. None
  8. None

  9. .padding-small { padding: 15px; } .white { color: white }

    .bg-blue { background-color: blue; }
  10. None
  11. None

  12. .u-display-block { display: block } .u-display-inline { display: inline }

    .u-display-inline-block { display: inline-block } .u-position-relative { position: relative }
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None

  19. REFACTOR ALL THE STYLES!

  20. INSPIRATION TO MAKE OUR CSS MORE... CONSISTENT MANTAINABLE PERFORMANT

  21. CONSISTENCY

  22. None
  23. None

  24. GOOD DEFAULTS SENSIBLE SCALE

  25. None
  26. None
  27. None
  28. None

  29. THE GOOD OPTIONS ARE YOUR ONLY OPTIONS

  30. YOU DON'T WRITE CSS YOU JUST USE CSS

  31. WRITE MARKUP

  32. WRITE MARKUP → SAVE

  33. WRITE MARKUP → SAVE → REFRESH

  34. DEMO

  35. MANTAINABILITY

  36. None

  37. FUNCTIONAL CSS FUNCTIONAL PROGRAMMING

  38. PURE FUNCTIONS

  39. FOR A GIVEN INPUT THE OUTPUT WILL ALWAYS BE THE

    SAME

  40. X × 2

  41. 2 × 2 → 4

  42. 2 × 2 → 4 3 × 2 → 6

  43. 2 × 2 → 4 3 × 2 → 6

    2 × 2 → 5

  44. .class { color: blue }

  45. .another { color: red } .class { color: blue }

  46. None

  47. STYLES DON'T OVERWRITE EACH OTHER NO SIDE-EFFECTS

  48. YOU DON'T NEED TO KEEP TRACK OF YOUR CSS

  49. PERFORMANCE

  50. The Problem with CSS

  51. None
  52. None
  53. None

  54. 184

  55. 123

  56. 499

  57. .db { display: block }

  58. .fl { float: left }

  59. None

  60. WHAT DOES THIS MEAN IN REAL LIFE?

  61. None
  62. None

  63. 508KB TO 175KB 65% REDUCTION

  64. IT CAN BE MADE EVEN SMALLER

  65. m.booking.com

  66. REFACTORING CSS HOLDS VERY LITTLE BUSINESS VALUE

  67. How can we explore Atomic CSS to improve our user

    experience and development process?

  68. THANKS! !

  69. bit.ly/functional-css-presentation