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
240
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
32
Using single property classes in CSS - FEL Nov 2015
richardbray
2
620
Other Decks in Technology
See All in Technology
手を動かしてレベルアップしよう!
maruto
0
200
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
What's new in Go 1.24?
ciarana
1
110
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
110
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
320
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
210
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
170
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
18k
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
Raycast Favorites × Script Command で実現するお手軽情報チェック
smasato
1
140
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Practical Orchestrator
shlominoach
186
10k
A Philosophy of Restraint
colly
203
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Music & Morning Musume
bryan
46
6.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Designing Experiences People Love
moore
140
23k
How STYLIGHT went responsive
nonsquared
98
5.4k
BBQ
matthewcrist
87
9.5k
We Have a Design System, Now What?
morganepeng
51
7.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