🇺🇸 React Rally 2023

Slide 1

Slide 1 text

Hello, React Rally 👋 🐙 🇺🇸 IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS • THE 18TH OF AUGUST, 2023.

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

🚨 INTERMISSION: Atomic CSS IT'S 2023 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 ✋ Who here uses — or has used — atomic/utility-first CSS? e.g. Tailwind, Tachyons, ACSS...

Slide 9

Slide 9 text

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

Slide 10

Slide 10 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 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 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 15

Slide 15 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 16

Slide 16 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 17

Slide 17 text

“What About… SoC?”

Slide 18

Slide 18 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 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Bad Claims

Slide 23

Slide 23 text

Bad Claims

Slide 24

Slide 24 text

Bad Claims

Slide 25

Slide 25 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 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 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 30

Slide 30 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 31

Slide 31 text

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

Slide 32

Slide 32 text

Pseudo Elements

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 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 36

Slide 36 text

Class Detection

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Hard to Scan

Slide 40

Slide 40 text

Hard to Scan

Slide 41

Slide 41 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 42

Slide 42 text

Slide 43

Slide 43 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 44

Slide 44 text

Hard to Scan

Slide 45

Slide 45 text

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

Slide 46

Slide 46 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 47

Slide 47 text

No content

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Encouraged Tag Soup

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 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 58

Slide 58 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 59

Slide 59 text

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

Slide 60

Slide 60 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 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 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 65

Slide 65 text

On-Demand Generation [BEFORE] CSS PROVIDED UNAVAILABLE CSS SHIPPED CSS YOU NEED CSS WASTED GENERATE SCAN PURGE

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

On-Demand Generation [AFTER]

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 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 71

Slide 71 text

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

Slide 72

Slide 72 text

Card

Beware of @apply

Slide 73

Slide 73 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 74

Slide 74 text

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

Slide 75

Slide 75 text

Type Safety

Slide 76

Slide 76 text

Type Safety

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 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 80

Slide 80 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 81

Slide 81 text

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

Slide 82

Slide 82 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 83

Slide 83 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 84

Slide 84 text

defaultVariants: { intent: 'default', size: 'medium', roundness: 'round', } StyleSheet Composition [COMPLEX]

Slide 85

Slide 85 text

StyleSheet Composition [COMPLEX] export default function Button({ intent, size, roundness, children }) { return ( {children} ) }

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

Linting / Formatting

Slide 88

Slide 88 text

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

Slide 89

Slide 89 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 90

Slide 90 text

Accessibility

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 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 94

Slide 94 text

Atomic CSS-in-JS

Slide 95

Slide 95 text

Atomic CSS-in-JS

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

IT'S 2023 AND I CAN FINALLY TALK ABOUT ATOMIC CSS ↑ ALL THE LINKS! 🤓 🧑🏫 @techlabs 🐦 @ythecombinator 👨💻 @medallia ⚡ Perf GDE

Slide 112

Slide 112 text

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