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 2015
Search
Richard Bray
November 27, 2015
Technology
2
550
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
24
The benefits of Atomic CSS - London Sass Feb 2016
richardbray
4
220
Other Decks in Technology
See All in Technology
シンプルなHITL機械学習と様々なタスクにおけるHITL機械学習
naohachi89
0
310
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
390
TiDBにおけるテーブル設計と最適化の事例
cygames
0
790
個人的、Kubernetes の最新注目機能! (2024年5月版) / TechFeed Experts Night#28 〜 コンテナ技術最前線
pfn
PRO
3
210
Blazor WASM × Code-first gRPC で始める C# ⼤統⼀理論
sansantech
PRO
1
310
.NET GraphQL Client のリアル
sansantech
PRO
1
220
AWSの生成AI入門書を執筆しました🎉
minorun365
PRO
0
140
Google Cloudを組織(企業)で運用する時のベストプラクティス × 健康の環境分離戦略 #まるクラ勉強会
yasumuusan
0
170
株式会社EventHub・エンジニア採用資料
eventhub
0
2.1k
Cloudflare WorkersがPythonに対応したので試してみた
miura55
0
190
「できる!」を増やすGitHub Copilot活用法 / How to use GitHub Copilot to expand your possibilities
sansan_randd
1
240
LLM評価の落とし穴~開発者目線で気をつけるポイント~
rishigami
11
3.2k
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Navigating Team Friction
lara
179
13k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
How to Ace a Technical Interview
jacobian
273
22k
Become a Pro
speakerdeck
PRO
13
4.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.5k
Gamification - CAS2011
davidbonilla
77
4.6k
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/