Grokking TechTalk #16: F**k bad CSS

Download as PPTX, PDF

1 like1,051 views

The document discusses best practices in CSS design and the challenges faced in a poorly structured codebase, emphasizing the importance of maintainable and organized CSS. It introduces an improved naming convention, a new icon system, and a Z-index scale to enhance reusability and consistency in UI components. Additionally, it highlights the benefits of well-documented code for development, prototyping, and onboarding new hires.

Technology

1
Cong Pham
Product Designer @ Anduin Transactions
cong.ph — me@cong.ph

There are two types of people in the world
3

1.
Ones who write well thought out, awesome and
maintainable CSS, who have good night's sleep
and fun weekends.
4

.homepage-promos .grid-50 {
width: 100%;
}
.homepage-promos .grid-33 {
width: 100%;
}
.homepage-promos .grid-34 {
width: 100%;
}
10

.product-tab {
height: 568px;
width: 99.753%;
}
11

.container-inner.promo-status {
float: center;
}
12

What the actual fuck?
C’est quoi ce bordel?
CLGT?
14

.sandwich-shop {
...
}
Can our sandwich shop have the same styling for its coke?
19

.pizza-shop {
.coke {
...
}
}
.sandwich-shop {
.coke {
...
}
}
20

.pizza-shop {
.menu {
.drinks {
.cold-drinks {
.coke {
...
}
}
}
}
}
24

.pizza-shop .menu .drinks .cold-drinks .coke {...}
25

.pizza-shop .menu .drinks .cold-drinks .coke {...}
26
🤣😭

2. No appropriate color system
$grey: ...;
$lighter-grey: ...;
$xtra-light-grey: ...;
$dark-grey: ...;
$darker-grey: ...;
30

5. No good naming convention
.pizza-shop-front-door-container-wrapper {...}
33

5. No good naming convention
.pizza-shop-front-door-container-wrapper {...}
34

http://anduin.design/
36

Things are organized based on components rather than views/pages
38

.btn {...}
.card {...}
.dropdown {...}
.nav-bar {...}
.well {...}
39

An organized page for all global variables.
40

New naming convention
http://rscss.io/
42

.card {
...
.title {
...
}
&.-primary {
...
}
}
43

.card {
...
.title {
...
}
&.-primary {
...
}
}
44

.card {
...
.title {
...
}
&.-primary {
...
}
}
45

.card {
...
.title {
...
}
&.-primary {
...
}
}
46

<div class=“card -primary”>
<div class=“title>...</div>
</div>
47

<div class=“card -primary”>
<div class=“title>...</div>
</div>
compares to Bootstrap
<div class=“card card-primary”>
<div class=“card-title>…</div>
</div>
48

<div class=“card -primary”>
<div class=“title>...</div>
</div>
compares to Bootstrap
<div class=“card card-primary”>
<div class=“card-title>…</div>
</div>
💯💯
49

• 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

• 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

// 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

// 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

Last but not least, great documentation.
61

• 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

69
New ACL will include a library of different master layouts

Involve engineers in the development of ACL’s next version
71

Further unifying and making UX patterns more consistent across all products
72

http://anduin.design/
73

Grokking TechTalk #16: F**k bad CSS

1. 1 Cong Pham Product Designer @ Anduin Transactions cong.ph — [email protected]

2. 2

3. There are two types of people in the world 3

4. 1. Ones who write well thought out, awesome and maintainable CSS, who have good night's sleep and fun weekends. 4

5. 2. 5

6. z-index: 1000000; 6

7. z-index: 1000000; 7

8. z-index: -999999; 8

9. z-index: -999999; 9

10. .homepage-promos .grid-50 { width: 100%; } .homepage-promos .grid-33 { width: 100%; } .homepage-promos .grid-34 { width: 100%; } 10

11. .product-tab { height: 568px; width: 99.753%; } 11

12. .container-inner.promo-status { float: center; } 12

13. 13

14. What the actual fuck? C’est quoi ce bordel? CLGT? 14

15. 15

16. 16

17. .pizza-shop { ... } 17

18. .pizza-shop { .coke { ... } } 18

19. .sandwich-shop { ... } Can our sandwich shop have the same styling for its coke? 19

20. .pizza-shop { .coke { ... } } .sandwich-shop { .coke { ... } } 20

21. Bad reusability Not DRY 21

22. Variables aren’t centralized 22

23. Deep nesting was insane 23

24. .pizza-shop { .menu { .drinks { .cold-drinks { .coke { ... } } } } } 24

25. .pizza-shop .menu .drinks .cold-drinks .coke {...} 25

26. .pizza-shop .menu .drinks .cold-drinks .coke {...} 26 🤣😭

27. Turning on SCSS-linter was a 27

28. The lack of systematic approach 28

29. 1. No icon system 29

30. 2. No appropriate color system $grey: ...; $lighter-grey: ...; $xtra-light-grey: ...; $dark-grey: ...; $darker-grey: ...; 30

31. 3. No typographic system 31

32. 4. No layering system (z-index) 32

33. 5. No good naming convention .pizza-shop-front-door-container-wrapper {...} 33

34. 5. No good naming convention .pizza-shop-front-door-container-wrapper {...} 34

35. Anduin Component Library 35

36. http://anduin.design/ 36

37. 37

38. Things are organized based on components rather than views/pages 38

39. .btn {...} .card {...} .dropdown {...} .nav-bar {...} .well {...} 39

40. An organized page for all global variables. 40

41. 41

42. New naming convention http://rscss.io/ 42

43. .card { ... .title { ... } &.-primary { ... } } 43

44. .card { ... .title { ... } &.-primary { ... } } 44

45. .card { ... .title { ... } &.-primary { ... } } 45

46. .card { ... .title { ... } &.-primary { ... } } 46

47. <div class=“card -primary”> <div class=“title>...</div> </div> 47

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. <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. A brand new icon set 50

51. Icon font vs SVG icons 51

52. Icon font vs SVG icons 52

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. • 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. • 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. • 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. A new z-index scale 57

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. // 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. Better set of Utils classes 60

61. Last but not least, great documentation. 61

62. 62

63. 63

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

66. More components 66

67. More components 67

68. 68 blueprintjs.com

69. 69 New ACL will include a library of different master layouts

70. 70 Modular CSS

71. Involve engineers in the development of ACL’s next version 71

72. Further unifying and making UX patterns more consistent across all products 72

73. http://anduin.design/ 73

74. 74

Editor's Notes

#2: Self introduction Apologize for being a designer Ask who’s in the venue write CSS daily? How did I get involved in this talk? Company party.
#3: What is bad CSS? I will try to show you bad CSS with the following images and examples.
#6: Oh Peter…I think this is quite related to many of us. Here’s an example
#7: Search for this on Github, there’s almost 300,000 cases like this…
#8: I don’t think the distance from the Moon to the Earth is higher than this
#9: Holy shit. I’m in hell.
#11: Because all grids were created equal.
#12: Let me try with 99%. Hmm that works. How about 99.75%? Wow, still works, let’s try 99.76%. Oops that didn’t work. Let’s compromise on 99.753%.
#13: I’m speechless. Fuck the spec, I’m writing my own shit.
#15: To sum up what’s bad CSS, here’s a nice joke from Thomas Fuchs
#17: So what are some of the problems we faced at Anduin?
#18: Wrapping of elements in a giant/custom class for a specific view/page. Let’s say we have a view called pizza-shop. We’d create a file name pizza-shop. The first class that wraps everything is .pizza-shop.
#19: Now. In this shop we have coke that needs styling. So we add .coke
#20: Let’s say along the line of product development, we have a new sandwich shop. And it also offers coke. And all cokes are the same. Unless you have some Chinese cokes. Which you shouldn’t have, seriously. That shit is poison.
#21: Now, the bad and lazy way of doing this is copy what’s in .coke for pizza-shop over to sandwich-shop. Hoping to pass the code reviewer, he turned out to be lazy and sympathize with you. He’ll let you off the hook this time. But this is a problem because…
#23: We used to declare variables at the beginning of the files. Some values aren’t even in variables.
#24: Use SCSS they say, its nesting feature is awesome they say. And we were like, hell yea! Which ended up with something like this…
#25: …and the outputted CSS looks like this…
#27: laugh now, cry later.
#28: We turned on SCSS linter. And I was the new guy so I had to do the cleaning up job. And this picture was exactly what happened to me…
#32: I won’t get into as this is more on the design side of things.
#33: When something didn’t layer right, we would try z-index: 2. Oh that didn’t work, let’s try 3, then 4, then “n” until it actually looks alright
#35: We needed some rules to prevent this from happening. All of these problems resulted in something that I’m eager to present to you today…
#36: Introducing Anduin Component Library or ACL. Let me show you what is it
#37: …The URL was anduin.design for those who wants to check it out by themselves. But please do that at the end of the talk please hehe
#40: Remember the .coke example? Now .coke itself is a component and its styles can be reuse everywhere that needs a coke.
#41: We have a section on ACL site to show all the variables.
#42: Clever.
#50: I’m not even going to mention BEM, those ugly hyphens and underscores…
#51: You can see them in Icons section on the site. I’m going to talk a bit about this though.
#53: We started with an icon font we made ourselves, but then switched to SVG icons later that year. Here’s why.
#61: Show margin and padding
#66: We’re working hard on the next version of ACL and here are what to expect.
#69: Palantir’s BlueprintJS is a kick ass component library that was released a few months back. They’ve done a great job and we want ACL to be like that, even better.
#70: again, this is a more design-centric topic, won’t discuss here.
#71: Make ACL’s utils more modular. Engineers can use these classes in HTML easily. This means less CSS will be written -> less headache.
#72: ACL1.0 was a project from Design team. We’re hoping that this time, some engineers will also contribute on this, especially in providing these stateful components.
#73: An example of this could be, an upload component should work the same way across all products. Before it looks the same but might not work the same.
#74: Once again here’s the link to the site. And this also concludes my talk today. Thank you.

Grokking TechTalk #16: F**k bad CSS

More Related Content

Viewers also liked (8)

Similar to Grokking TechTalk #16: F**k bad CSS (20)

More from Grokking VN (20)

Recently uploaded (20)

Grokking TechTalk #16: F**k bad CSS

Editor's Notes