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
Using single property classes in CSS - FEL Nov ...
Search
Richard Bray
November 27, 2015
Technology
2
640
Using single property classes in CSS - FEL Nov 2015
Richard Bray
November 27, 2015
Tweet
Share
More Decks by Richard Bray
See All by Richard Bray
Webpack Talk
richardbray
0
38
The benefits of Atomic CSS - London Sass Feb 2016
richardbray
4
250
Other Decks in Technology
See All in Technology
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
180
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
170
オブザーバビリティが育むシステム理解と好奇心
maruloop
1
670
様々なファイルシステム
sat
PRO
0
240
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
1
170
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
3
3.1k
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
9.8k
ソースを読むプロセスの例
sat
PRO
15
9.9k
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
850
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
150
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
optim
0
100
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
1
320
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Why Our Code Smells
bkeepers
PRO
340
57k
Navigating Team Friction
lara
190
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
For a Future-Friendly Web
brad_frost
180
10k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
4 Signs Your Business is Dying
shpigford
185
22k
Embracing the Ebb and Flow
colly
88
4.9k
Transcript
Using single property classes in CSS Richard Bray @ceiga
This is the first time I’ve ever done a talk
This is my first FEL event!
None
Why?
None
Who am I?
Developer / Designer / Product Designer
None
Side Projects - richbray.me
The Problem
CSS has become complicated
Before Write CSS Upload it. Done!
Now Preprocessor Normal Css Post Process Minify
Now Preprocessor Normal Css Post Process Minify
Now Preprocessor Normal Css Post Process Minify Server Side Language
Terminal Knowledge
Now Version Control (maybe)
None
Multiple files
What If?
None
Typical Process 1. Inspect Element in Chrome 2. Make change
in Developer Tools 3. Run site locally 4. Locate .scss file and change 5. Save and View 6. Go through process mentioned previously
Typical Process 1. Inspect Element in Chrome 2. Make change
in Developer Tools 3. Run site locally 4. Locate .scss file and change 5. Save and View 6. Go through process mentioned previously
New Process 1. Inspect Element in Chrome 2. Make change
in Developer Tools 3. Update and save html file
Not inline CSS
Helper (or single property) Classes
None
None
None
None
None
New Process 1. Inspect Element in Chrome 2. Make change
in Developer Tools 3. Update and save html file
How do you implement this?
Either
Or visit richbray.me/bricks
None
None
None
Similar naming convention
Or visit richbray.me/bricks
New projects only! (unless you’re refactoring)
Let your HTML do the work
Another Thing
Not a fan of @extends
None
None
Use @mixins instead
3 issues with this method
1. Lots of classes on a html element looks ‘ugly’
None
None
None
2. Slight chance of bloating your CSS
None
None
You Could
Or Just leave it 2 KB compressed 82.34 KB compressed
3. Media queries is tough
None
Desktop Mobile
None
This isn’t a new concept
None
None
None
None
http://ux.mailchimp.com/patterns/helpers
http://ux.mailchimp.com/patterns/helpers
Thank You! Richard Bray @Ceiga https://github.com/RichardBray
http://digitalcroydon.net/event/