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
37
The benefits of Atomic CSS - London Sass Feb 2016
richardbray
4
250
Other Decks in Technology
See All in Technology
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
tnir
4
4.9k
Vault meets Kubernetes
mochizuki875
0
140
TypeScript入門
recruitengineers
PRO
32
9.9k
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
210
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
2
660
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
kintone開発チームの紹介
cybozuinsideout
PRO
0
73k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.6k
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
280
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
530
「AI2027」を紐解く ― AGI・ASI・シンギュラリティ
masayamoriofficial
0
140
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
170
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
Visualization
eitanlees
147
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Optimizing for Happiness
mojombo
379
70k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.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/