🌐 The Geek Conf 2024

It's 2024 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, The Geek Conf 2024! 👋 IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS • JULY 18, 2024.
2. MATHEUS ALBUQUERQUE • @ythecombinator IT'S 2024 AND… I CAN FINALLY TALK ABOUT ATOMIC CSS
3. This talk presents… ↝ The Bad (takes) ↝ The Good ↝ The Bad ↝ The Ugly ↝ The Good (Ways) ↝ Closing Thoughts
4. 🚨 INTERMISSION: Atomic CSS IT'S 2024 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 🤔 If you were to summarize your experience with atomic CSS, what would you say?
9. #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. The Bad (takes) IT'S 2024 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. Tailwind has the potential to alleviate some of the concerns outlined for atomic CSS and provides intriguing new benefits.
18. The Good IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
19. 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
20. 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)); } }
21. Conciseness <div class="grid lg:grid-cols-4 grid-cols-2"></div>
22. Component-Based Frameworks
23. 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
24. Consistency
25. The Good ↝ CONCISENESS ↝ COMPONENT-BASED FRAMEWORKS ↝ ENCAPSULATION / CONSISTENCY ↝ REDUCES OVERALL CSS ↝ COPY-PASTE MARKUP
26. The Bad IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
27. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #1 BAD CLAIMS
28. 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
29. 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
30. 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
31. Bad Claims
32. I often see a popular belief that Tailwind is the future of web development, and that it represents the correct way to do things.
33. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 UTILITY CSS LOCK-IN
34. Semantic HTML/CSS ↝ Tailwind ↝ BREAK “COMPOUND” SEMANTIC CLASSES INTO “ATOMIC” UTILITY CLASSES WITH SINGLE RESPONSIBILITIES ↝ A FAIRLY EASY THING TO DO
35. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
36. 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
37. 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
38. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #3 MISSING KEY CSS FEATURES
39. Pseudo Elements
40. Missing Key CSS Features ↝ BACKGROUND GRADIENTS; ↝ ANIMATIONS; ↝ NEW SELECTORS (:is AND :where) ↝ NEW FUNCTIONS (min(), max(), AND clamp()) ↝ OTHER BLEEDING-EDGE FEATURES
41. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #4 CLASS DETECTION
42. 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
43. Class Detection
44. The Ugly IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
45. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #1 HARD TO SCAN
46. Hard to Scan <div className="w-16 h-16 md:w-32 md:h-32 lg:w-48 lg:h-48"/>
47. 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"/>
48. 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; } }
49. 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; } }
50. 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
51. Hard to Scan
52. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 ENCOURAGED TAG SOUP
53. 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
55. #hotTake 🌶 The problem lies in thinking in CSS classes first, rather than starting with markup and working the CSS from there.
56. #hotTake 🌶 Tools can make it easy to do certain things the wrong way.
57. #hotTake 🌶 Tools can make it easy to do certain things the wrong way. Their approach makes poor semantics the easiest path.
58. Encouraged Tag Soup
59. #hotTake 🌶 Optimizing for developer happiness and productivity over readability, maintainability, and accessibility.
61. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
62. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
63. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #3 DEVELOPER (TOOLS) EXPERIENCE
64. 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
65. 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
66. Hard To Find Components — THE PROBLEM WITH ATOMIC CSS, BY ADAM SILVER
67. 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
68. The Good (Way) IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
69. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #1 ON-DEMAND GENERATION
70. @for $i from 1 through 10 { .m-#{$i} { margin: $i / 4 rem; } } On-Demand Generation: Before
71. @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
72. On-Demand Generation: Before CSS PROVIDED UNAVAILABLE CSS SHIPPED CSS YOU NEED CSS WASTED GENERATE SCAN PURGE
73. On-Demand Generation: After CSS YOU ARE USING CSS SHIPPED (PROD / DEV) CSS GENERATED ON DEMAND SCAN GENERATE SHIP
74. On-Demand Generation: After
75. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 BEWARE OF @apply
77. 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
78. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
79. <div className="card bg-white padding-lg">Card</div> Beware of @apply
80. 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
81. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #3 TYPE SAFETY
82. Type Safety
83. Type Safety
84. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #4 STYLESHEET COMPOSITION
85. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
86. StyleSheet Composition: Simple import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function classnames(…inputs: ClassValue[]) { return twMerge(clsx(inputs)) }
87. 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
88. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
89. 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
90. 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
91. defaultVariants: { intent: 'default', size: 'medium', roundness: 'round', } StyleSheet Composition: Complex
92. StyleSheet Composition: Complex export default function Button({ intent, size, roundness, children }) { return ( <button className={buttonVariants({ intent, size, roundness })}>{children}</button> ) }
93. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #5 TOOLING TOOLING TOOLING
94. Linting + Formatting
95. clamp()
96. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
97. 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)
98. Accessibility
99. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #6 ATOMIC CSS-IN-JS
100. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
101. #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
102. Atomic CSS-in-JS
103. Atomic CSS-in-JS
104. Closing Thoughts IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
105. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
106. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
108. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS
109. 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
110. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #2 THE SOLUTION TO THE PROBLEM ONLY CHANGES THE PROBLEM
111. 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
112. 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
113. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #4 TAILWIND SUFFERS FROM THINKING IT APPLIES TO ALL PROJECTS
114. IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS #5
115. 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
116. 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
117. Experiences With Atomic CSS…
118. Experiences With Atomic CSS…
119. Experiences With Atomic CSS…
121. 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
122. Matheus Albuquerque ↝ 𝕏 ythecombinator ↝ 👨💻 Sr. SWE @ Medallia ↝ ⚛ PC @ React Su m m it NYC ↝ ⚡ Google Developer Expert
123. THAT’S ALL, FOLKS! THANKS! 👋 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ↑ ALL THE LINKS! IT'S 2024 AND I CAN FINALLY TALK ABOUT ATOMIC CSS