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 2015
Search
Richard Bray
November 27, 2015
Technology
2
550
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
24
The benefits of Atomic CSS - London Sass Feb 2016
richardbray
4
220
Other Decks in Technology
See All in Technology
JAWS-UG Bedrock Claude Night
yamahiro
3
570
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
890
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.6k
私が trocco を推す理由
__allllllllez__
1
210
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
420
日本におけるデータエンジニアリングのこれまでとこれから
foursue
16
4.2k
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
280
テストプロセスで大事にしていること #jasstnano
makky_tyuyan
0
170
JSON攻略法.pdf
miyakemito
8
5k
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
2
2.1k
Featured
See All Featured
Building Applications with DynamoDB
mza
88
5.6k
Designing for humans not robots
tammielis
248
25k
Web development in the modern age
philhawksworth
202
10k
Side Projects
sachag
451
41k
It's Worth the Effort
3n
180
27k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
A Philosophy of Restraint
colly
197
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
GitHub's CSS Performance
jonrohan
1025
450k
The Cost Of JavaScript in 2023
addyosmani
16
3.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/