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
37
Using single property classes in CSS - FEL Nov 2015
richardbray
2
640
Other Decks in Technology
See All in Technology
#普通の文系サラリーマンチャレンジ 自分でアプリ開発と電子工作を続けたら人生が変わった
tatsuya1970
0
750
C# 14 / .NET 10 の新機能 (RC 1 時点)
nenonaninu
1
1.2k
Streamlit は社内ツールだけじゃない!PoC の速さで実現する'商用品質'の分析 SaaS アーキテクチャ
kdash
2
1k
サプライチェーン攻撃に学ぶModuleの仕組みと セキュリティ対策
kuro_kurorrr
3
790
非同期処理実行基盤 Delayed脱出 → Solid Queue完全移行への旅路。
srockstyle
3
1.3k
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.5k
WebアプリケーションのUI構築で気を付けてるポイント
tomokusaba
0
180
履歴 on Rails: Bitemporal Data Modelで実現する履歴管理/history-on-rails-with-bitemporal-data-model
hypermkt
0
1.8k
Go Conference 2025: GoのinterfaceとGenericsの内部構造と進化 / Go type system internals
ryokotmng
3
540
What is BigQuery?
aizack_harks
0
120
今日から始めるpprof / Pprof workshop for beginners
ymotongpoo
6
780
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
910
Featured
See All Featured
It's Worth the Effort
3n
187
28k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Writing Fast Ruby
sferik
629
62k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
The Invisible Side of Design
smashingmag
301
51k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
BBQ
matthewcrist
89
9.8k
Rails Girls Zürich Keynote
gr2m
95
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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