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
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
220
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
9
73k
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
460
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
280
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
260
人工衛星のファームウェアをRustで書く理由
koba789
15
8k
2025年になってもまだMySQLが好き
yoku0825
8
4.8k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1k
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.4k
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
180
Practical Agentic AI in Software Engineering
uzyn
0
110
Featured
See All Featured
A better future with KSS
kneath
239
17k
RailsConf 2023
tenderlove
30
1.2k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Thoughts on Productivity
jonyablonski
70
4.8k
Into the Great Unknown - MozCon
thekraken
40
2k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Pragmatic Product Professional
lauravandoore
36
6.9k
For a Future-Friendly Web
brad_frost
180
9.9k
Optimizing for Happiness
mojombo
379
70k
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/