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
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
320
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
300
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
240
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
BI ツールはもういらない?Amazon RedShift & MCP Server で試みる新しいデータ分析アプローチ
cdataj
0
160
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
120
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
480
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
510
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
200
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
970
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
170
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Context Engineering - Making Every Token Count
addyosmani
6
260
Rails Girls Zürich Keynote
gr2m
95
14k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Documentation Writing (for coders)
carmenintech
75
5.1k
KATA
mclloyd
32
15k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Code Review Best Practice
trishagee
72
19k
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/