Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The benefits of Atomic CSS - London Sass Feb 2016
Search
Richard Bray
February 16, 2016
Technology
4
250
The benefits of Atomic CSS - London Sass Feb 2016
Richard Bray
February 16, 2016
Tweet
Share
More Decks by Richard Bray
See All by Richard Bray
Webpack Talk
richardbray
0
38
Using single property classes in CSS - FEL Nov 2015
richardbray
2
640
Other Decks in Technology
See All in Technology
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
180
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
650
まだ間に合う! 2025年のhono/ssg事情
watany
3
650
[2025年10月版] Databricks Data + AI Boot Camp
databricksjapan
1
260
入院医療費算定業務をAIで支援する:包括医療費支払い制度とDPCコーディング (公開版)
hagino3000
0
110
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
3
340
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
110
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
optim
0
110
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
120
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
170
知覚とデザイン
rinchoku
1
550
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
13
82k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.6k
Designing Experiences People Love
moore
142
24k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Faster Mobile Websites
deanohume
310
31k
Rails Girls Zürich Keynote
gr2m
95
14k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
600
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Transcript
The benefits of Atomic CSS Richard Bray @Ceiga
Product Designer
Side Projects - richbray.me
Write articles and do talks, sometimes
Atomic CSS disclaimer alert!!!
None
None
Everyone doesn’t have to adopt this method.
What is Atomic CSS (ACSS)?
What is Atomic Design?
None
“Atoms are the basic building blocks of matter. Applied to
web interfaces, atoms are our HTML tags, such as a form label, an input or a button.” Brad Frost
ACSS is a method of using one class for one
CSS property so that same property can be used in different parts of a site.
What does that look like?
None
None
My preferred way of writing ACSS
None
None
None
None
None
None
None
None
None
None
Until–I tried media queries with it
None
Desktop Mobile
None
Pseudo Classes/Elements
acss.io
None
will-change
None
None
None
Wait, what about the round brackets () or parens if
you’re American
None
mathiasbynens.be/notes/css-escapes
None
None
And that’s why I prefer - ()
2 more advantages of using acss
1. Quick prototyping
None
None
Preprocessor Normal Css Post Process Minify
Style Page Done!
1. a Great way to visualise page
None
2. Avoids overusing @extend
None
None
None
None
4 disadvantages of using acss
1. Lots of classes on a html element looks ‘ugly’
None
None
2. Slight chance of bloating your CSS If not maintained
None
None
acss.io
None
None
3. Requires more maintenance than normal css
None
None
4. It’s just like inline css
None
- Can’t do media queries or pseudo classes - Inline
css not cached - Uses more characters than acss
This isn’t a new concept
None
None
None
http://ux.mailchimp.com/patterns/helpers
http://ux.mailchimp.com/patterns/helpers
None
None
None
Open source acss projects
None
None
None
and much much more…
Everyone doesn’t have to adopt this method.
None
None
None
http://digitalcroydon.net/event/
Thank You! Richard Bray @Ceiga https://github.com/RichardBray