🌐 The Geek Conf 2024

Slide 1

Slide 1 text

Hello, The Geek Conf 2024! 👋 IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS • JULY 18, 2024.

Slide 2

Slide 2 text

MATHEUS ALBUQUERQUE • @ythecombinator IT'S 2024 AND… I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 3

Slide 3 text

This talk presents… ↝ The Bad (takes) ↝ The Good ↝ The Bad ↝ The Ugly ↝ The Good (Ways) ↝ Closing Thoughts

Slide 4

Slide 4 text

🚨 INTERMISSION: Atomic CSS IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 5

Slide 5 text

#definition 🧐 Atomic CSS is the approach to CSS architecture that favors small, single- purpose classes with names based on visual function.

Slide 6

Slide 6 text

Atomic CSS

Card

Slide 7

Slide 7 text

Atomic CSS

Card

Slide 8

Slide 8 text

#QUESTION 🤔 If you were to summarize your experience with atomic CSS, what would you say?

Slide 9

Slide 9 text

#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…

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

The Bad (takes) IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 12

Slide 12 text

“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

Slide 13

Slide 13 text

“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

Slide 14

Slide 14 text

“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)

Slide 15

Slide 15 text

“What About… SoC?”

Slide 16

Slide 16 text

“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” ↝ …

Slide 17

Slide 17 text

Tailwind has the potential to alleviate some of the concerns outlined for atomic CSS and provides intriguing new benefits.

Slide 18

Slide 18 text

The Good IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 19

Slide 19 text

Conciseness ↝ WE'RE ALWAYS TRYING TO WRITE CODE AS EFFICIENTLY AS POSSIBLE ↝ CSS STILL REQUIRES A SIGNIFICANT AMOUNT OF CODE EVEN WITH PREPROCESSORS ↝ ATOMIC CSS ALLOWS DEVELOPERS TO USE SIGNIFICANTLY SMALLER RULES

Slide 20

Slide 20 text

Conciseness div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1024px) { div { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

Slide 21

Slide 21 text

Conciseness

Slide 22

Slide 22 text

Component-Based Frameworks

Slide 23

Slide 23 text

Encapsulation ↝ STYLING IS CONTAINED IN CLASSES AND ONLY APPLIES TO ELEMENTS WITH THOSE CLASSES ↝ YOU DON'T HAVE TO WORRY ABOUT ACCIDENTALLY BREAKING SOMETHING WHEN MODIFYING A RULE IN A PARTICULAR CLASS ↝ BETTER SPECIFICITY AND CLARITY: EACH ELEMENT CAN HAVE ITS OWN CLASSES FOR ITS PARTICULAR NEEDS

Slide 24

Slide 24 text

Consistency

Slide 25

Slide 25 text

The Good ↝ CONCISENESS ↝ COMPONENT-BASED FRAMEWORKS ↝ ENCAPSULATION / CONSISTENCY ↝ REDUCES OVERALL CSS ↝ COPY-PASTE MARKUP

Slide 26

Slide 26 text

The Bad IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 27

Slide 27 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #1 BAD CLAIMS

Slide 28

Slide 28 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS ↝ CSS DEFINES THE STYLE AND LAYOUT OF A PAGE = MODIFYING THE APPEARANCE OF A UI ELEMENT REQUIRES CHANGES TO THE CSS ↝ THIS DOES NOT ALWAYS MEAN CREATING A NEW RULE

Slide 29

Slide 29 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS ↝ THE ONLY DIFFERENCE FROM A MAINTENANCE PERSPECTIVE IS WHERE YOU MAKE THE CHANGE, RATHER THAN WHETHER THE CHANGE IS REQUIRED ↝ CHANGES RESTRICTED TO CSS VS RESTRICTED TO HTML ↝ WHILE THE CLASS NAMES REMAIN UNCHANGED, YOU STILL NEED TO MODIFY THE CONTENTS OF THE CLASS ATTRIBUTE AS THAT IS YOUR CSS

Slide 30

Slide 30 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS ↝ ASSUMPTION: SWITCHING BETWEEN HTML AND CSS ALL THE TIME IS A PAIN ↝ IF YOU’RE TWEAKING MARKUP CONSTANTLY WHILE YOU’RE WORKING ON THE APPEARANCE, YOU COULD BE TREATING IT AS AN EXTENSION OF CSS RATHER THAN THE MARKUP FOR THE DOCUMENT STRUCTURE

Slide 31

Slide 31 text

Bad Claims

Slide 32

Slide 32 text

I often see a popular belief that Tailwind is the future of web development, and that it represents the correct way to do things.

Slide 33

Slide 33 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 UTILITY CSS LOCK-IN

Slide 34

Slide 34 text

Semantic HTML/CSS ↝ Tailwind ↝ BREAK “COMPOUND” SEMANTIC CLASSES INTO “ATOMIC” UTILITY CLASSES WITH SINGLE RESPONSIBILITIES ↝ A FAIRLY EASY THING TO DO

Slide 35

Slide 35 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #3 MISSING KEY CSS FEATURES

Slide 39

Slide 39 text

Pseudo Elements

Slide 40

Slide 40 text

Missing Key CSS Features ↝ BACKGROUND GRADIENTS; ↝ ANIMATIONS; ↝ NEW SELECTORS (:is AND :where) ↝ NEW FUNCTIONS (min(), max(), AND clamp()) ↝ OTHER BLEEDING-EDGE FEATURES

Slide 41

Slide 41 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #4 CLASS DETECTION

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Class Detection

Slide 44

Slide 44 text

The Ugly IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 45

Slide 45 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #1 HARD TO SCAN

Slide 46

Slide 46 text

Hard to Scan

Slide 47

Slide 47 text

Hard to Scan

Slide 48

Slide 48 text

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; } }

Slide 49

Slide 49 text

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Hard to Scan

Slide 52

Slide 52 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 ENCOURAGED TAG SOUP

Slide 53

Slide 53 text

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

AS YOU WANT WITHOUT CARING ABOUT MEANING ↝ YOU CAN DO IT THE RIGHT WAY, BUT ERGONOMICS LEAN DEEP DOM

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

#hotTake 🌶 The problem lies in thinking in CSS classes first, rather than starting with markup and working the CSS from there.

Slide 56

Slide 56 text

#hotTake 🌶 Tools can make it easy to do certain things the wrong way.

Slide 57

Slide 57 text

#hotTake 🌶 Tools can make it easy to do certain things the wrong way. Their approach makes poor semantics the easiest path.

Slide 58

Slide 58 text

Encouraged Tag Soup

Slide 59

Slide 59 text

#hotTake 🌶 Optimizing for developer happiness and productivity over readability, maintainability, and accessibility.

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 62

Slide 62 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 63

Slide 63 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #3 DEVELOPER (TOOLS) EXPERIENCE

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Hard To Find Components — THE PROBLEM WITH ATOMIC CSS, BY ADAM SILVER

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

The Good (Way) IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 69

Slide 69 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #1 ON-DEMAND GENERATION

Slide 70

Slide 70 text

@for $i from 1 through 10 { .m-#{$i} { margin: $i / 4 rem; } } On-Demand Generation: Before

Slide 71

Slide 71 text

@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

Slide 72

Slide 72 text

On-Demand Generation: Before CSS PROVIDED UNAVAILABLE CSS SHIPPED CSS YOU NEED CSS WASTED GENERATE SCAN PURGE

Slide 73

Slide 73 text

On-Demand Generation: After CSS YOU ARE USING CSS SHIPPED (PROD / DEV) CSS GENERATED ON DEMAND SCAN GENERATE SHIP

Slide 74

Slide 74 text

On-Demand Generation: After

Slide 75

Slide 75 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 BEWARE OF @apply

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 79

Slide 79 text

Card

Beware of @apply

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #3 TYPE SAFETY

Slide 82

Slide 82 text

Type Safety

Slide 83

Slide 83 text

Type Safety

Slide 84

Slide 84 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #4 STYLESHEET COMPOSITION

Slide 85

Slide 85 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 86

Slide 86 text

StyleSheet Composition: Simple import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function classnames(…inputs: ClassValue[]) { return twMerge(clsx(inputs)) }

Slide 87

Slide 87 text

const Input = ({ className, . . . props }) = > { return ; }; import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function classnames(…inputs: ClassValue[]) { return twMerge(clsx(inputs)) } StyleSheet Composition: Simple

Slide 88

Slide 88 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

defaultVariants: { intent: 'default', size: 'medium', roundness: 'round', } StyleSheet Composition: Complex

Slide 92

Slide 92 text

StyleSheet Composition: Complex export default function Button({ intent, size, roundness, children }) { return ( {children} ) }

Slide 93

Slide 93 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #5 TOOLING TOOLING TOOLING

Slide 94

Slide 94 text

Linting + Formatting

Slide 95

Slide 95 text

clamp()

Slide 96

Slide 96 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 97

Slide 97 text

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)

Slide 98

Slide 98 text

Accessibility

Slide 99

Slide 99 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #6 ATOMIC CSS-IN-JS

Slide 100

Slide 100 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 101

Slide 101 text

#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

Slide 102

Slide 102 text

Atomic CSS-in-JS

Slide 103

Slide 103 text

Atomic CSS-in-JS

Slide 104

Slide 104 text

Closing Thoughts IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 105

Slide 105 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 106

Slide 106 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 109

Slide 109 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #1 IT’S JUST A TOOL BUT THE RIGHT TOOL™ CAN MAKE A HUGE DIFFERENCE

Slide 110

Slide 110 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 THE SOLUTION TO THE PROBLEM ONLY CHANGES THE PROBLEM

Slide 111

Slide 111 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 THE SOLUTION TO THE PROBLEM ONLY CHANGES THE PROBLEM TRADE-OFFS TRADE-OFFS TRADE-OFFS

Slide 112

Slide 112 text

IT'S 2024 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

Slide 113

Slide 113 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #4 TAILWIND SUFFERS FROM THINKING IT APPLIES TO ALL PROJECTS

Slide 114

Slide 114 text

IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #5

Slide 115

Slide 115 text

IT'S 2024 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

Slide 116

Slide 116 text

If you were to summarize your experience with atomic CSS, what would you say? IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS

Slide 117

Slide 117 text

Experiences With Atomic CSS…

Slide 118

Slide 118 text

Experiences With Atomic CSS…

Slide 119

Slide 119 text

Experiences With Atomic CSS…

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

IT'S 2024 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

Slide 122

Slide 122 text

Matheus Albuquerque ↝ 𝕏 ythecombinator ↝ 👨💻 Sr. SWE @ Medallia ↝ ⚛ PC @ React Su m m it NYC ↝ ⚡ Google Developer Expert

Slide 123

Slide 123 text

THAT’S ALL, FOLKS! THANKS! 👋 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ↑ ALL THE LINKS! IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS