Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Grokking TechTalk #16: F**k bad CSS

643 views

Published on

Speaker: Cong Pham - Product Designer @ Anduin Transactions

Bio: Product designer at Anduin Transactions. Previously Misfit Wearables. Pushing pixels, crafting interfaces and brewing coffee daily.

Description: The story of how we f**ked bad CSS up pretty hard. The story of courage on how we destroyed old conventions to create something new, useful and functional that unified interfaces across teams and products. How you should do the same thing for your team. And what are we expecting to come in the future.

Published in: Technology
  • Be the first to comment

Grokking TechTalk #16: F**k bad CSS

  1. 1. 1 Cong Pham Product Designer @ Anduin Transactions cong.ph — me@cong.ph
  2. 2. 2
  3. 3. There are two types of people in the world 3
  4. 4. 1. Ones who write well thought out, awesome and maintainable CSS, who have good night's sleep and fun weekends. 4
  5. 5. 2. 5
  6. 6. z-index: 1000000; 6
  7. 7. z-index: 1000000; 7
  8. 8. z-index: -999999; 8
  9. 9. z-index: -999999; 9
  10. 10. .homepage-promos .grid-50 { width: 100%; } .homepage-promos .grid-33 { width: 100%; } .homepage-promos .grid-34 { width: 100%; } 10
  11. 11. .product-tab { height: 568px; width: 99.753%; } 11
  12. 12. .container-inner.promo-status { float: center; } 12
  13. 13. 13
  14. 14. What the actual fuck? C’est quoi ce bordel? CLGT? 14
  15. 15. 15
  16. 16. 16
  17. 17. .pizza-shop { ... } 17
  18. 18. .pizza-shop { .coke { ... } } 18
  19. 19. .sandwich-shop { ... } Can our sandwich shop have the same styling for its coke? 19
  20. 20. .pizza-shop { .coke { ... } } .sandwich-shop { .coke { ... } } 20
  21. 21. Bad reusability Not DRY 21
  22. 22. Variables aren’t centralized 22
  23. 23. Deep nesting was insane 23
  24. 24. .pizza-shop { .menu { .drinks { .cold-drinks { .coke { ... } } } } } 24
  25. 25. .pizza-shop .menu .drinks .cold-drinks .coke {...} 25
  26. 26. .pizza-shop .menu .drinks .cold-drinks .coke {...} 26 🤣😭
  27. 27. Turning on SCSS-linter was a 27
  28. 28. The lack of systematic approach 28
  29. 29. 1. No icon system 29
  30. 30. 2. No appropriate color system $grey: ...; $lighter-grey: ...; $xtra-light-grey: ...; $dark-grey: ...; $darker-grey: ...; 30
  31. 31. 3. No typographic system 31
  32. 32. 4. No layering system (z-index) 32
  33. 33. 5. No good naming convention .pizza-shop-front-door-container-wrapper {...} 33
  34. 34. 5. No good naming convention .pizza-shop-front-door-container-wrapper {...} 34
  35. 35. Anduin Component Library 35
  36. 36. http://anduin.design/ 36
  37. 37. 37
  38. 38. Things are organized based on components rather than views/pages 38
  39. 39. .btn {...} .card {...} .dropdown {...} .nav-bar {...} .well {...} 39
  40. 40. An organized page for all global variables. 40
  41. 41. 41
  42. 42. New naming convention http://rscss.io/ 42
  43. 43. .card { ... .title { ... } &.-primary { ... } } 43
  44. 44. .card { ... .title { ... } &.-primary { ... } } 44
  45. 45. .card { ... .title { ... } &.-primary { ... } } 45
  46. 46. .card { ... .title { ... } &.-primary { ... } } 46
  47. 47. <div class=“card -primary”> <div class=“title>...</div> </div> 47
  48. 48. <div class=“card -primary”> <div class=“title>...</div> </div> compares to Bootstrap <div class=“card card-primary”> <div class=“card-title>…</div> </div> 48
  49. 49. <div class=“card -primary”> <div class=“title>...</div> </div> compares to Bootstrap <div class=“card card-primary”> <div class=“card-title>…</div> </div> 💯💯 49
  50. 50. A brand new icon set 50
  51. 51. Icon font vs SVG icons 51
  52. 52. Icon font vs SVG icons 52
  53. 53. • Pros • Doesn’t get pixelate • @font-face is widely supported • You can use CSS color property to change color • Cons • Browser needs to load the entire font • Hard to update when you want to add new icons • They don’t work like you want them to • Dealing with all the font’s properties isn’t pleasant • Browser fallback on missing glyphs looks ugly • Emojis are cooler nowadays Icon font 53
  54. 54. • Pros • Doesn’t pixelate • Extensive customizations • Behave & render correctly • Browser will only need to load the chosen SVG rather than the entire sprite • XLINK:HREF is awesome • Updating new icons is super easy (Grunt) • Cons • XLINK:HREF doesn’t work on IE. SVG icons 54
  55. 55. • Pros • Doesn’t pixelate • Extensive customizations • Behave & render correctly • Browser will only need to load the chosen SVG rather than the entire sprite • XLINK:HREF is awesome • Updating new icons is super easy (Grunt) • Cons • XLINK:HREF doesn’t work on IE. SVG icons 55
  56. 56. • Pros • Doesn’t pixelate • Extensive customizations • Behave & render correctly • Browser will only need to load the chosen SVG rather than the entire sprite • XLINK:HREF is awesome • Updating new icons is super easy (Grunt) • Cons • XLINK:HREF doesn’t work on IE. SVG icons 56
  57. 57. A new z-index scale 57
  58. 58. // The z-index scale $z-index-1: 100; $z-index-2: 200; $z-index-3: 300; $z-index-4: 400; $z-index-5: 500; $z-index-6: 600; $z-index-7: 700; $z-index-8: 800; $z-index-9: 900; $z-index-10: 1000; 58
  59. 59. // z-index 2 $z-index-calendar-dropdown: $z-index-2; $z-index-dropdown-list: $z-index-2; $z-index-hover-color-scheme: $z-index-2; $z-index-modal-content: $z-index-2; // z-index 3 $z-index-datepicker-field: $z-index-3; $z-index-dropdown-field: $z-index-3; 59
  60. 60. Better set of Utils classes 60
  61. 61. Last but not least, great documentation. 61
  62. 62. 62
  63. 63. 63
  64. 64. • Nicer, cleaner and maintainable CSS codebase • Better for development • Better for prototyping new products • Engineers can now do simple layout adjustments without asking a designer for help • This acts as our UI style guide as well -> easier to onboard new hires 64
  65. 65. 65
  66. 66. More components 66
  67. 67. More components 67
  68. 68. 68 blueprintjs.com
  69. 69. 69 New ACL will include a library of different master layouts
  70. 70. 70 Modular CSS
  71. 71. Involve engineers in the development of ACL’s next version 71
  72. 72. Further unifying and making UX patterns more consistent across all products 72
  73. 73. http://anduin.design/ 73
  74. 74. 74

×