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
630
Other Decks in Technology
See All in Technology
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3.1k
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
5
410
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
180
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
420
Data Engineering Study#30 LT資料
tetsuroito
1
280
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
250
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
2k
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
480
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
5
4k
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
620
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
370
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How to Ace a Technical Interview
jacobian
278
23k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Automating Front-end Workflow
addyosmani
1370
200k
Music & Morning Musume
bryan
46
6.7k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
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