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
220
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
24
Using single property classes in CSS - FEL Nov 2015
richardbray
2
540
Other Decks in Technology
See All in Technology
Tebiki株式会社 エンジニア採用資料
tebiki
0
4.1k
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
0
300
Hands-on / Kaname Frusawa / Cloud Compare Users Meetup 2024 at University of Tokyo on April 17
paraworld
2
470
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
3
1.9k
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
530
人間の尊厳、幸福、アクセシビリティ / 第116回「WEB TOUCH MEETING」アクセシビリティSP
nulabinc
PRO
2
180
キャラクター制御のためのプロンプト術 for LINE Bot
uezo
0
520
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
5
2.7k
テストプロセスで大事にしていること #jasstnano
makky_tyuyan
0
110
Janus
bkuhlmann
0
490
社内勉強会運営のコツ
senoo
6
1.1k
A (short) History of AI
harishpillay
0
110
Featured
See All Featured
Web development in the modern age
philhawksworth
201
10k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Designing the Hi-DPI Web
ddemaree
276
33k
Embracing the Ebb and Flow
colly
79
4.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
13
1.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
38k
How to Ace a Technical Interview
jacobian
272
22k
Raft: Consensus for Rubyists
vanstee
132
6.2k
Bash Introduction
62gerente
604
210k
Navigating Team Friction
lara
177
13k
The Invisible Customer
myddelton
114
12k
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