The Case for Atomic CSS
The Case for Atomic / Utility-First CSS

	
			
			A collection of various content detailing and demonstrating the benefits of Atomic CSS,
				also known as Utility First or Functional CSS.
			The term Atomic CSS refers to an architectural philosophy, not any one
				particular library or framework, and encompasses both static (e.g. Tachyons,
				Tailwind) and programmatic (e.g. Styled Components, Emotion, Theme UI, ACSS.io) approaches. For a clear
				definition and information on related terminology, read Let’s Define Exactly What Atomic CSS
					is.
			
			Many of those who brought forth this approach were inspired by the groundbreaking
				2009-2011 work of Nicole Sullivan on OOCSS (for more historical context, read this).
			Missing something? Suggest new content via GitHub or Twitter
		
	
			Foundational Posts
			
				
					Challenging
						CSS Best Practices
					by Thierry Koblenz
					October 21, 2013
				
				
					CSS and Scalability
					by Adam Morse
					March 24, 2016
				
				
					CSS Utility Classes
						and ‘Separation of Concerns’
					by Adam Wathan
					August 7, 2017
				
			
		
	
			Articles and Case Studies
			
				
					Defending
						Presentational Class Names
					by Philip Walton
					January 22, 2013
				
				
					Naming CSS Stuff is
						Really Hard
					by Ethan Muller
					October 21, 2013
				
				
					Atomic CSS as a
						toolset
					by Alma Madsen
					January 31, 2014
				
				
					Thinking in Atomic
					by ACSS.io
					April 30, 2015
				
				
					Rethinking Variables in
						CSS
					by Brent Jackson
					May 8, 2015
				
				
					Contextual
						Styling: UI Components, Nesting and Implementation Detail
					by Harry Roberts
					June 13, 2015
				
				
					Functional Programming, CSS, and your
						sanity
					by Jon Gold
					June 30, 2015
				
				
					Building and
						shipping functional CSS
					by Cole Peters (case study)
					November 30, 2015
				
				
					Introducing Solid
					by Emily Brick
					December 2, 2015
				
				
					Expressive CSS
					by John Polacek
					December 5, 2015
				
				
					How
						I Learned to Stop Worrying and Love the Atomic Class
					by Sam Thurman
					February 3, 2016
				
				
					Future
						CSS
					by J. Ky Marsh
					April 3, 2016
				
				
					Reuse
						or not reuse...
					by Thierry Koblentz
					May 26, 2016
				
				
					Rationalizing Functional
						CSS
					by Marcelo Somers
					June 9, 2016
				
				
					Keeping your
						CSS Dry with Tachyons
					by Dakota Lee Martinez
					June 23, 2016
				
				
					Functional CSS — The Good, The
						Bad, and Some Protips for React.js Users
					by Shu Uesugi
					August 10, 2016
				
				
					Simple Style Sheets
					by Anton Kovalyov
					September 28, 2016
				
				
					15kb of
						CSS is all you’ll ever need
					by Philip Ardeljan
					November 16, 2016
				
				
					Front end strategy for
						products that scale
					by Emil Milanov
					November 20, 2016
				
				
					Kiss My
						Classname: A Counterpoint
					by John Polacek
					January 8, 2017
				
				
					The journey of simplifying our CSS
					by Sebastian Hermida
					January 17, 2017
				
				
					Opinions
						of Leaders Considered Harmful
					by Thierry Koblenz
					January 22, 2017
				
				
					Cooking with Design Systems
					by Dan Mall
					February 28, 2017
				
				
					Full
						re-write in 10 days with tachyons and functional CSS
					by Simon Vrachliotis (case study)
					February 28, 2017
				
				
					By The
						Numbers: A Year and Half with Atomic CSS
					by John Polacek
					May 31, 2017
				
				
					Takeaways
						from trying out Tachyons CSS after ages using BEM
					by Callum Jefferies
					October 13, 2017
				
				
					Using a Utility CSS Library
					by Paul Underwood
					November 20, 2017
				
				
					On the Growing Popularity of Atomic
						CSS
					by Ollie Williams
					November 24, 2017
				
				
					How to
						write better CSS in teams with ACSS — A dynamic Atomic CSS library
					by Kushagra Gour
					January 4, 2018
				
				
					In Defense
						of Utility-First CSS
					by Sarah Dayan
					January 26, 2018
				
				
					On Moving to a Utility-first CSS
						Framework
					by Debra Ohayon
					February 28, 2018
					
				
				
					Utility classes vs.
						inline styles
					by Mike Crittenden
					May 4, 2018
				
				
					Simplify Styling with Functional
						CSS
					by Harry Nicholls
					October 18, 2018
				
				
					Tailwind: style your
						site without writing any CSS!
					by Julia Evans
					November 1, 2018
				
				
					Redesigning
						Our Docs – Part 4 – Building a Scalable CSS Architecture
					by Sarah Dayan
					March 14th, 2019
				
				
					CSS utility
						classes: Your library of extendable styles
					by Russell Bishop
					October 23rd, 2019 
				
				
					Why I Love Tailwind
					by Max Stoiber
					December 7, 2020
				
				
					No, Utility
						Classes Aren't the Same As Inline Styles
					by Sarah Dayan
					May 16, 2021
				
				
					The evolution of
						scalable CSS
					by REM
					November 12, 2022
				
			
		
	
			Presentations
			
				
					ACSS:
						Rethinking CSS Best Practices
					by Renato Iwashima
					October 23, 2013
					
				
				
					Atomic CSS
					by Thierry Koblenz
					November 18, 2013
					
				
				
					Atomic
						CSS: How to Take Control of Your CSS
					by Amelia Downs
					December 4, 2014
					
				
				
					Atomic CSS: Learning to love presentational
						classes
					by Brendan Subol
					October 30, 2016
					
				
				
					Functional Immutable CSS
					by Alex Topolyanskiy
					December 26, 2016
					
				
				
					Rethinking CSS
					by John Polacek
					June 3, 2017
					
				
				
					Utility-First CSS: What’s all
						the rage?
					by Simon Vrachliotis
					December 13, 2017
					
				
				
					Functional CSS: Clean &
						composable UI on massive apps
					by Eli Fitch
					August 11, 2018
					
				
				
					A Real-Life Journey Into the
						Opinionated World of “Utility-First” CSS
					by Simon Vrachliotis
					October 29, 2018
					
				
				
					In
						Defense of Utility-First CSS
					by Sarah Dayan
					December 4, 2019
					
				
			
		
	
			Other
			
				
					How is tachyons different from inline
						styles?
					Discussion on the Tachyons GitHub Project
					October 20, 2014
				
				
					Falling With Style
					by Does Not Compute (podcast)
					March 29, 2016
				
				
					Here’s why I think designing systems
						with tools/frameworks like Tachyons is a Good Idea™
					by Daniel Eden (series of tweets)
					April 29, 2016
				
				
					68: Building Interfaces with Utility-First CSS
					by Full Stack Radio (podcast)
					July 19, 2017
				
				
					75: Diana Mounter - Design Systems and Utility Classes
						at GitHub
					by Full Stack Radio (podcast)
					October 25, 2017
				
				
					76: Tailwind CSS vs. the World
					by Full Stack Radio (podcast)
					November 8, 2017
				
				
					Functional CSS and Tachyons with Adam Morse
					by The Changelog (podcast)
					November 10, 2017
				
				
					Tail­wind CSS
						util­i­ty-first CSS with Adam Wathan
					by devMode.fm (podcast)
					December 22, 2017
				
			
		
	
			Companies Using Atomic CSS in Production
			
				
					Facebook
				
				
					Google
				
				
					Microsoft
				
				
					GitHub
				
				
					NASA
				
				
					Mashable
				
				
					Yahoo!
				
				
					Medium
				
				
					Kickstarter
				
				
					Twitch
				
				
					TED
				
				
					Buzzfeed
				
				
					Tinder
				
				
					Stack Overflow
				
				
					Heroku
				
				
					Algolia
				
				
					Segment
				
				
					Stripe
				
				
					See also Tailwind Showcase and Tachyons Gallery
				
			
		


