🇨🇿 Productboard Frontend Meetup (Nov 2023)

ℹ️ It's 2023 and I Can Finally Talk About Atomic CSS

Libraries like Tailwind became quite popular and their utility-first—aka atomic classes—approach was an interesting paradigm shift in CSS. Many developers love it, and it's understandable why.

However, we tend to forget that the core of this technique isn't new. Way before Bootstrap, we all had our small CSS snippets copied from project to project with similar classes.

In this session, we'll discuss the evolution of scalable CSS, walk through the limitations and drawbacks of Atomic CSS, and figure out where this concept can be beneficial.

Transcript

1. Hello, Productboard! 👋 IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS • THE 22ND OF NOVEMBER, 2023.
2. MATHEUS ALBUQUERQUE • @ythecombinator IT'S 2023 AND… I CAN FINALLY TALK ABOUT ATOMIC CSS
3. This talk presents… ↝ The Bad (takes) ↝ The Bad ↝ The Ugly ↝ The Good (Way) ↝ Closing Thoughts
4. 🚨 INTERMISSION: Atomic CSS IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
5. #definition 🧐 Atomic CSS is the approach to CSS architecture that favors small, single- purpose classes with names based on visual function.
6. Atomic CSS <div class="card">Card</div>
7. Atomic CSS <div class="max-w-sm rounded overflow-hidden shadow-lg">Card</div>
8. #QUESTION ✋ Who here uses — or has used — atomic/utility-first CSS? e.g. Tailwind, Tachyons, ACSS...
9. #QUESTION 🤔 If you were to summarize your experience with atomic CSS, what would you say?
10. #QUESTION 🤔 If you were to summarize your experience with atomic CSS, what would you say? e.g. easy to reuse, hard to read, love it, an anti-pattern, enforced consistency, BEM is enough…
11. If you were to summarize your experience with atomic CSS, what would you say? IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
13. The Bad (takes) IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
14. “What About… Inline Styles?” ↝ SURPRISINGLY COSTLY FOR THE BROWSER ↝ CAN'T HANDLE MEDIA QUERIES OR PSEUDO SELECTORS ↝ YOU DON’T HAVE TO FOLLOW ANY PRE-EXISTING DEFINITION ↝ UTILITY CLASSES EXPOSE A WELL-DEFINED API AND A SINGLE SOURCE OF TRUTH
15. “What About… the HTML Bloat?” ↝ THE DEFLATE ALGORITHM (GZIP) CAN HANDLE DUPLICATE STRINGS ↝ THE MORE A SELECTOR IS REPEATED IN A STYLESHEET, THE MORE WORK THE BROWSER HAS TO DO TO RESOLVE ALL STYLES
16. “What About… SoC?” ↝ STYLE COMPOSITION IS PERFORMED IN THE HTML, BUT NOT USING style OR align ATTRIBUTES ↝ PIECES ARE ASSEMBLED FROM A STYLESHEET WRITTEN IN CSS AND HTML BECOMES A CONSUMER OF A CSS ↝ EXTREME VISION OF “SEPARATION OF CONCERNS” ↝ DEEPLY IMPRACTICAL (DOGMATIC LEVEL)
17. “What About… SoC?”
18. “What About…?” ↝ “REDESIGNING/THEMING BECOMES CHALLENGING” ↝ “IT RESULTS IN A LOT OF UNUSED CSS” ↝ “IT’S HARD TO KNOW WHAT’S AVAILABLE TO USE” ↝ “A WHOLE OTHER LANGUAGE TO LEARN ON TOP OF CSS” ↝ …
19. Tailwind has the potential to alleviate some of the concerns outlined for atomic CSS and provides intriguing new benefits.
20. The Bad IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
21. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #1 BAD CLAIMS
22. Bad Claims
23. Bad Claims
24. Bad Claims
25. I often see a popular belief that Tailwind is the future of web development, and that it represents the correct way to do things.
26. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 UTILITY CSS LOCK-IN
27. Semantic HTML/CSS ⇢ Tailwind ↝ BREAK “COMPOUND” SEMANTIC CLASSES INTO “ATOMIC” UTILITY CLASSES WITH SINGLE RESPONSIBILITIES ↝ A FAIRLY EASY THING TO DO
28. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
29. Tailwind ⇢ Semantic HTML/CSS ↝ IT’S HARD TO PICTURE A TOOL THAT DOES THE REVERSE ↝ YOU CAN’T REALLY BUILD MORE COMPLEX WITHOUT ASSEMBLING THOSE CLASSES BY HAND ↝ YOU COULD ONLY REALISTICALLY CONVERT TAILWIND INTO SOME OTHER UTILITY FRAMEWORK
30. Utility CSS Lock-in ↝ MOVING TO ANY OTHER FRAMEWORK OR PREPROCESSOR REQUIRES A CONSIDERABLE AMOUNT OF REFACTORING ↝ MOST OF US AREN’T SWAPPING OUT CSS FRAMEWORKS ON PROJECTS ON A REGULAR BASIS ↝ BUT IT’S AN IMPORTANT CONSIDERATION FOR APPS THAT YOU’LL BE MAINTAINING IN THE FUTURE
31. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #3 MISSING KEY CSS FEATURES
32. Pseudo Elements
33. Missing Key CSS Features ↝ BACKGROUND GRADIENTS; ↝ ANIMATIONS; ↝ NEW SELECTORS (:is AND :where) ↝ NEW FUNCTIONS (min(), max(), AND clamp()) ↝ OTHER BLEEDING-EDGE FEATURES
34. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #4 CLASS DETECTION
35. Class Detection ↝ TAILWIND DOESN'T PARSE OR EXECUTE ANY OF THE CODE ↝ IT USES REGULAR EXPRESSIONS TO EXTRACT EVERY STRING THAT COULD POSSIBLY BE A CLASS NAME ↝ IT WILL ONLY FIND CLASSES THAT EXIST AS COMPLETE UNBROKEN STRINGS ↝ YOU CAN'T CONSTRUCT CLASS NAMES DYNAMICALLY
36. Class Detection
37. The Ugly IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
38. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #1 HARD TO SCAN
39. Hard to Scan <div className="w-16 h-16 md:w-32 md:h-32 lg:w-48 lg:h-48"/>
40. Hard to Scan <div className="w-16 h-16 rounded text-white bg-black py-1 px-2 m-1 text-sm md:w-32 md:h-32 md:rounded-md md:text-base lg:w-48 lg:h-48 lg:rounded-lg lg:text-lg"/>
41. Hard to Scan .class { width: 16px; height: 16px; color: white; background-color: black; padding: 0.25rem 0.5rem; margin: 0.25rem; border-radius: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; } @media screen and (min-width: 768px) { .class { width: 32px; height: 32px; border-radius: 0.375rem; font-size: 1rem; line-height: 1.5rem; } } @media screen and (min-width: 1024px) { .class { width: 48px; height: 48px; border-radius: 0.5rem; font-size: 1.125rem; line-height: 1.75rem; } }
42. Hard to Scan .class { width: 16px; height: 16px; color: white; background-color: black; padding: 0.25rem 0.5rem; margin: 0.25rem; border-radius: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; } @media screen and (min-width: 768px) { .class { width: 32px; height: 32px; border-radius: 0.375rem; font-size: 1rem; line-height: 1.5rem; } } @media screen and (min-width: 1024px) { .class { width: 48px; height: 48px; border-radius: 0.5rem; font-size: 1.125rem; line-height: 1.75rem; } }
43. Hard to Scan ↝ IT'S SIMPLER TO SCAN IF YOU ONLY NEED TO READ YOUR CODE FROM TOP TO BOTTOM ↝ IT'S EASIER TO FIND SPECIFIC PROPERTY-VALUE PAIRS ↝ PROPER SYNTAX HIGHLIGHTING SEPARATES PROPERTIES FROM VALUES AND ENHANCES READABILITY
44. Hard to Scan
45. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 ENCOURAGED TAG SOUP
46. Encouraged Tag Soup ↝ THE FOCUS IS ON THE CLASSES, NOT THE MARKUP ↝ TAILWINDCSS DOESN’T PROMOTE “UGLY HTML” AT ALL ↝ BUT YOU CAN THROW IN AS MANY <div> AS YOU WANT WITHOUT CARING ABOUT MEANING ↝ YOU CAN DO IT THE RIGHT WAY, BUT ERGONOMICS LEAN DEEP DOM
48. #hotTake 🌶 The problem lies in thinking in CSS classes first, rather than starting with markup and working the CSS from there.
49. #hotTake 🌶 Tools can make it easy to do certain things the wrong way.
50. #hotTake 🌶 Tools can make it easy to do certain things the wrong way. Their approach makes poor semantics the easiest path.
51. Encouraged Tag Soup
52. #hotTake 🌶 Optimizing for developer happiness and productivity over readability, maintainability, and accessibility.
54. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
55. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
56. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #3 DEVELOPER (TOOLS) EXPERIENCE
57. Hard To Find Components ↝ WHEN TROUBLESHOOTING IN A LARGE CODE BASE, NARROWING DOWN THE AFFECTED COMPONENT IS IMPORTANT ↝ HAVING A CLOSE MAPPING BETWEEN A COMPONENT’S NAME AND ITS CLASS NAMES MAKES IT EASIER TO FIND THE RELEVANT CODE QUICKLY ↝ HERE, WE HAVE TWO OPTIONS: KNOWLEDGE OF THE PARTICULAR AREA OF THE APP AND STRINGS
58. Hard To Find Components ↝ NOT EVERYONE ON A TEAM MAY BE FAMILIAR WITH EVERY COMPONENT IN THE CODE BASE (ENTERPRISE-SCALE MONOREPOS, NEW HIRES, ETC.) ↝ STRINGS MAY GET REUSED ACROSS MULTIPLE COMPONENTS = SEARCHING MAY YIELD MULTIPLE RESULTS ↝ IT’S HARD TO DETERMINE WHERE A MODULE STARTS AND ENDS
59. Hard To Find Components — THE PROBLEM WITH ATOMIC CSS, BY ADAM SILVER
60. Hard to Tweak CSS ↝ MAKING STYLE TWEAKS THROUGH DEV TOOLS IN THE BROWSER IS A COMMON PRACTICE ↝ HERE, YOU NEED TO GIVE EACH COMPONENT A NEW CLASS NAME AND USE THAT AS THE SELECTOR ↝ …OR USE INLINE STYLES, BUT SOMETIMES IT'S HELPFUL TO SEE HOW CHANGES ARE REFLECTED THROUGHOUT THE UI
61. The Good (Way) IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
62. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #1 ON-DEMAND GENERATION
63. @for $i from 1 through 10 { .m-#{$i} { margin: $i / 4 rem; } } On-Demand Generation [BEFORE]
64. @for $i from 1 through 10 { .m-#{$i} { margin: $i / 4 rem; } } .m-1 { margin: 0.25 rem; } .m-2 { margin: 0.5 rem; } / * . . . * / .m-10 { margin: 2.5 rem; } On-Demand Generation [BEFORE]
65. On-Demand Generation [BEFORE] CSS PROVIDED UNAVAILABLE CSS SHIPPED CSS YOU NEED CSS WASTED GENERATE SCAN PURGE
66. On-Demand Generation [AFTER] CSS YOU ARE USING CSS SHIPPED (PROD / DEV) CSS GENERATED ON DEMAND SCAN GENERATE SHIP
67. On-Demand Generation [AFTER]
68. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 BEWARE OF @apply
70. Beware of @apply NEGATES BENEFITS GAINED OVER TRADITIONAL COMPONENT- DRIVEN CSS: ↝ THE EXPLICITNESS OF THE CLASS NAME ↝ THE TIME SAVED BY NOT HAVING TO WRITE YOUR OWN CSS ↝ THE SINGLE SOURCE OF TRUTH
71. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
72. <div className="card bg-white padding-lg">Card</div> Beware of @apply
73. Beware of @apply ↝ EXTREMELY DESTRUCTIVE POTENTIAL ↝ E.G. USE FUNCTIONAL CLASSES AS AN ESCAPE HATCH TO UNDO COMPONENT RULES ↝ STRIVE TO BE EXTREMELY STRICT WITH THE APPLICATION OF BOTH SO THAT THEY DO NOT INTERSECT OR SHARE CONCERNS
74. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #3 TYPE SAFETY
75. Type Safety
76. Type Safety
77. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #4 STYLESHEET COMPOSITION
78. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
79. StyleSheet Composition [SIMPLE] import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function classnames(…inputs: ClassValue[]) { return twMerge(clsx(inputs)) }
80. const Input = ({ className, . . . props }) = > { return <input className={classnames(' . . . ', className)} { . . . props} />; }; import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function classnames(…inputs: ClassValue[]) { return twMerge(clsx(inputs)) } StyleSheet Composition [SIMPLE]
81. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
82. const buttonVariants = cva( ' . . . ', { variants: { intent: { primary: 'bg-green-500 hover:bg-green-600', secondary: 'bg-red-500 hover:bg-red-600', default: 'bg-gray-500 hover:bg-gray-600', }, size: { small: ['text-sm', 'py-1', 'px-2'], medium: ['text-base', 'py-2', 'px-4'], large: ['text-lg', 'py-4', 'px-8'], }, roundness: { square: 'rounded-none', round: 'rounded-md', pill: 'rounded-full', }, }, defaultVariants: { intent: 'default', size: 'medium', roundness: 'round', }, } ); StyleSheet Composition [COMPLEX]
83. intent: { primary: 'bg-green-500 hover:bg-green-600', secondary: 'bg-red-500 hover:bg-red-600', default: 'bg-gray-500 hover:bg-gray-600', } size: { small: ['text-sm', 'py-1', 'px-2'], medium: ['text-base', 'py-2', 'px-4'], large: ['text-lg', 'py-4', 'px-8'], } roundness: { square: 'rounded-none', round: 'rounded-md', pill: 'rounded-full', } StyleSheet Composition [COMPLEX]
84. defaultVariants: { intent: 'default', size: 'medium', roundness: 'round', } StyleSheet Composition [COMPLEX]
85. StyleSheet Composition [COMPLEX] export default function Button({ intent, size, roundness, children }) { return ( <button className={buttonVariants({ intent, size, roundness })}>{children}</button> ) }
86. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #5 TOOLING TOOLING TOOLING
87. Linting / Formatting
88. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
89. Accessibility ↝ BUILD PROCESS: CATCH ERRORS AS YOU BUILD OUT THE APP (AXE-CORE, JSX-A11Y, LIGHTHOUSE AUDITS, ACCESSLINT.JS) ↝ CONTINUOUS INTEGRATION: FIND ISSUES IN YOUR PULL REQUESTS (AXE-LINTER OR ACCESSLINT)
90. Accessibility
91. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #6 ATOMIC CSS-IN-JS
92. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
93. #hotTake 🌶 It allows us to write our styles in a familiar “monolithic” way, but get Atomic CSS out. — THE SHORTHAND-LONGHAND PROBLEM IN ATOMIC CSS, BY ROBIN WESER
94. Atomic CSS-in-JS
95. Atomic CSS-in-JS
96. Closing Thoughts IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
97. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
98. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
100. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
101. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #1 IT’S JUST A TOOL BUT THE RIGHT TOOL™ CAN MAKE A HUGE DIFFERENCE
102. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 THE SOLUTION TO THE PROBLEM ONLY CHANGES THE PROBLEM
103. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 THE SOLUTION TO THE PROBLEM ONLY CHANGES THE PROBLEM TRADE-OFFS TRADE-OFFS TRADE-OFFS
104. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #3 UTILITY CLASSES CAN COEXIST WITH OTHER APPROACHES THE SWEET SPOT FOR YOU MIGHT BE A HYBRID OF DIFFERENT CONVENTIONS
105. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #4 TAILWIND SUFFERS FROM THINKING IT APPLIES TO ALL PROJECTS
106. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #5
107. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #5 JSX CREATED A SIMILAR FEELING AMONG DEVELOPERS WORLDWIDE …IT WAS GOING AGAINST SO MANY BEST PRACTICES THAT IT COULDN'T BE CONSIDERED A GOOD IDEA
108. If you were to summarize your experience with atomic CSS, what would you say? IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
109. Experiences With Atomic CSS…
110. Experiences With Atomic CSS…
111. Experiences With Atomic CSS…
113. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #6 THERE’S AN EMOTIONAL FACET TO DEVELOPERS’ TECH CHOICES THIS SCORCHING PASSION IS USUALLY WHAT’S CALLED TEAM IDENTIFICATION IN PSYCHOLOGY
114. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS ↑ ALL THE LINKS! 🧑🏫 TECHLABS 🐦 @ythecombinator 👨💻 MEDALLIA ⚡ GDE
115. THAT’S ALL, FOLKS! THANKS! 👋 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ↑ ALL THE LINKS! IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS