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
540
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
SREsのためのSRE定着ガイド
netmarkjp
10
1.7k
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2.1k
オブジェクト指向宗教史
tanakahisateru
14
12k
Introducing Pkl
enomotok
0
260
Why do you get AWS certificates
hirosys
0
120
データマネジメントを支える武器としてのメタデータ管理
10xinc
2
950
Challenges - Open Farming Hackdays 2024
loleg
0
580
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
140
戦略的DDDを実践するための跳躍力 / OOC 2024
pictiny
6
4.2k
OpenTelemetry実践 はじめの一歩
taxin
0
330
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
500
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Scaling GitHub
holman
456
140k
A Tale of Four Properties
chriscoyier
150
22k
What's new in Ruby 2.0
geeforr
335
31k
Building Your Own Lightsaber
phodgson
97
5.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
What's in a price? How to price your products and services
michaelherold
236
11k
Web development in the modern age
philhawksworth
201
10k
BBQ
matthewcrist
78
8.7k
In The Pink: A Labor of Love
frogandcode
137
21k
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/