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
630
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
35
The benefits of Atomic CSS - London Sass Feb 2016
richardbray
4
240
Other Decks in Technology
See All in Technology
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
1
430
今日からはじめるプラットフォームエンジニアリング
jacopen
7
1.5k
LiteXとオレオレCPUで作る自作SoC奮闘記
msyksphinz
0
740
LangfuseでAIエージェントの 可観測性を高めよう!/Enhancing AI Agent Observability with Langfuse!
jnymyk
1
240
AWSのマルチアカウント管理 ベストプラクティス最新版 2025 / Multi-Account management on AWS best practice 2025
ohmura
4
320
意思決定を支える検索体験を目指してやってきたこと
hinatades
PRO
0
230
AWS全冠芸人が見た世界 ~資格取得より大切なこと~
masakiokuda
5
6.4k
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
780
QA/SDETの現在と、これからの挑戦
imtnd
0
140
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
15
5k
AIコーディングの最前線 〜活用のコツと課題〜
pharma_x_tech
4
2.3k
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
150
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Visualization
eitanlees
146
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
GraphQLとの向き合い方2022年版
quramy
46
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Making Projects Easy
brettharned
116
6.1k
How to Think Like a Performance Engineer
csswizardry
23
1.5k
Music & Morning Musume
bryan
47
6.5k
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/