🇳🇱 React Summit 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 also figure out where this concept can be beneficial.

Transcript

1. Hello, React Summit 👋 🇳🇱 IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS • THE 6TH OF JUNE, 2023.
2. MATHEUS ALBUQUERQUE • @ythecombinator IT'S 2023 AND… I CAN FINALLY TALK ABOUT ATOMIC CSS
3. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS ↑ ALL THE LINKS! 🤓 🧑🏫 @techlabs 🐦 @ythecombinator 👨💻 @medallia ⚡ Perf GDE
4. This talk presents… ↝ Problems of CSS at scale ↝ The Bad (takes) ↝ The Bad ↝ The Ugly ↝ The Good (Way) ↝ Closing Thoughts
5. Problems of CSS at scale IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
6. Lack of Namespaces ↝ GLOBAL NAMESPACE WAS DESIGNED AS CORE FEATURE OF CSS TO ENABLE PORTABILITY AND CASCADING ↝ ANY PROGRAMMING LANGUAGES LACKING BUILT-IN NAMESPACES WILL HAVE PROBLEMS AT SCALE ↝ OPTIONS LIKE CSS-IN-JS FIXED THAT WITH BUILD TOOLS THAT CAN INTERCEPT AND GENERATE SCOPES AUTOMATICALLY
7. Stuck With the Past ↝ MAINTAINING BACKWARD COMPATIBILITY IS A TOP PRIORITY WHEN DESIGNING NEW FEATURES ↝ IT'S NOT ALWAYS FEASIBLE TO COMPLETELY ABANDON BAD DECISIONS MADE IN THE PAST ↝ ADOPTION RATE AND BROWSER SUPPORT MUST BE TAKEN INTO ACCOUNT WHEN MAKING CHANGES TO THE LANGUAGE
8. Unpredictable to Humans ↝ CSS MERGES STYLES FROM MULTIPLE SOURCES AND ORIGINS (IE. INLINE STYLES, INTERNAL AND EXTERNAL STYLESHEETS, DIFFERENT SELECTORS, ETC.) ↝ THIS INVOLVES SPECIFICITY CALCULATIONS, INHERITANCE, AND OTHERS, MAKING IT QUITE COMPLEX ↝ IT’S HARD FOR HUMANS TO PREDICT HOW STYLES WILL BE RESOLVED
9. Static ↝ STILL PRIMARILY A SET OF STATIC LAYOUT RULES, WITH LIMITED SUPPORT FOR DYNAMIC AND VARIABLE STYLING ↝ STILL STRUGGLES TO KEEP UP WITH THE DEMANDS OF DYNAMIC WEB PAGES ↝ THEMING AND DYNAMIC CHANGES BASED ON INCOMING DATA FROM JAVASCRIPT CAN BE CHALLENGING
11. The Bad (takes) IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
12. “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
13. “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
14. “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)
15. “What About… SoC?”
16. “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 ↝ …
17. “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 ↝ …
18. Tailwind has the potential to alleviate some of the concerns outlined for atomic CSS and provides intriguing new benefits.
19. The Bad IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
20. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #1 BAD CLAIMS
21. Bad Claims
22. Bad Claims
23. I often see a popular belief that Tailwind is the future of web development, and that it represents the correct way to do things.
24. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 UTILITY CSS LOCK-IN
25. Semantic HTML/CSS ⇢ Tailwind ↝ BREAK “COMPOUND” SEMANTIC CLASSES INTO “ATOMIC” UTILITY CLASSES WITH SINGLE RESPONSIBILITIES ↝ A FAIRLY EASY THING TO DO
26. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
27. 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
28. 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
29. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #3 MISSING KEY CSS FEATURES
30. Pseudo Elements
31. Missing Key CSS Features ↝ BACKGROUND GRADIENTS; ↝ ANIMATIONS; ↝ NEW SELECTORS (:is AND :where) ↝ NEW FUNCTIONS (min(), max(), AND clamp()) ↝ OTHER BLEEDING-EDGE FEATURES
32. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #4 CLASS DETECTION
33. 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
34. Class Detection
35. The Ugly IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
36. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #1 HARD TO SCAN
37. Hard to Scan <div className="w-16 h-16 md:w-32 md:h-32 lg:w-48 lg:h-48"/>
38. 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"/>
39. 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; } }
40. 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; } }
41. 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
42. Hard to Scan
43. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 ENCOURAGED TAG SOUP
44. 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
46. #hotTake 🌶 The problem lies in thinking in CSS classes first, rather than starting with markup and working the CSS from there.
47. #hotTake 🌶 Tools can make it easy to do certain things the wrong way.
48. #hotTake 🌶 Tools can make it easy to do certain things the wrong way. Their approach makes poor semantics the easiest path.
49. Encouraged Tag Soup
50. #hotTake 🌶 Optimizing for developer happiness and productivity rather than what the DOM looks like underneath.
51. #hotTake 🌶 Optimizing over performance, readability, maintainability, and accessibility.
53. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
54. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
55. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #3 DEVELOPER (TOOLS) EXPERIENCE
56. 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
57. 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
58. Hard To Find Components — THE PROBLEM WITH ATOMIC CSS, BY ADAM SILVER
59. 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
60. 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 .btn { @apply font-bold py-2 px-4 rounded; }
71. 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
72. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
73. <div className="card bg-white padding-lg">Card</div> Beware of @apply
74. 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
75. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #3 TYPE SAFETY
76. Type Safety
77. Type Safety
78. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #4 STYLESHEET COMPOSITION
79. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
80. StyleSheet Composition [SIMPLE] import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function classnames(…inputs: ClassValue[]) { return twMerge(clsx(inputs)) }
81. 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]
82. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
83. 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]
84. 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]
85. defaultVariants: { intent: 'default', size: 'medium', roundness: 'round', } StyleSheet Composition [COMPLEX]
86. StyleSheet Composition [COMPLEX] export default function Button({ intent, size, roundness, children }) { return ( <button className={buttonVariants({ intent, size, roundness })}>{children}</button> ) }
87. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #5 TOOLING TOOLING TOOLING
88. Linting / Formatting
89. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
90. 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) ↝ SIMULATE IMPAIRMENTS: USE TOOLS TO SIMULATE COLOR BLINDNESS, LOW VISION, ZOOM, LOW CONTRAST…
91. Accessibility
92. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #6 ATOMIC CSS-IN-JS
93. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
94. #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
95. Atomic CSS-in-JS
96. Atomic CSS-in-JS
97. Atomic CSS-in-JS ↝ NO NEED FOR A SPECIFIC CLASS NAMING CONVENTION ↝ TREATS COMMON AND ONE-OFF STYLES ON AN EQUAL BASIS ↝ EXTRACTS CRITICAL CSS FROM A PAGE AND ENABLES CODE-SPLITTING ↝ RESOLVES CSS RULES INSERTION ORDER ISSUES IN JAVASCRIPT
98. Closing Thoughts IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
99. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
100. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
102. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
103. 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
104. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 THE SOLUTION TO THE PROBLEM ONLY CHANGES THE PROBLEM
105. 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
106. 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
107. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #4 TAILWIND SUFFERS FROM THINKING IT APPLIES TO ALL PROJECTS
108. IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #5
109. 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
110. 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
111. THAT’S ALL, FOLKS! THANKS! 👋 🇳🇱 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ↑ ALL THE LINKS! 🤓 IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS