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
analysis パッケージの仕組みの上でMulti linter with configを実現する / Go Conference 2025
k1low
1
240
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
710
DEFCON CHV CTF 2025 Write-up
bata_24
0
190
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
300
KMP の Swift export
kokihirokawa
0
130
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
130
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
290
Deep Research と NotebookLM を使い倒す!レガシーリプレイスの技術選定と学習コスト削減術
tet0h
0
2.8k
SOC2取得の全体像
shonansurvivors
1
340
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
110
C# 14 / .NET 10 の新機能 (RC 1 時点)
nenonaninu
1
1.2k
ZennとCloud Runの歩み - プロダクト開発に全集中できる相棒になるまで
wadayusuke
5
630
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Faster Mobile Websites
deanohume
310
31k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Practical Orchestrator
shlominoach
190
11k
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/