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
BDD(Cucumber)コミュニティが無料提供しているコンテンツの紹介と現在起きている危機
nihonbuson
4
750
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
150
どう買う?Azure
kuniteru
1
190
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
140
コードレビューを支援するAI技術の応用
akkie76
3
200
20240321_生成AI時代のDevOps
kzkmaeda
2
620
Azureコストは水道代/The_47th_Tokyo_Jazug
aeonpeople
3
390
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
340
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
130
AFTを運用していたらAWS Configの課金が急増していた件
msato
0
120
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
300
私のRSpecの書き方 / How I write RSpec
tmtms
4
840
Featured
See All Featured
Become a Pro
speakerdeck
PRO
8
4.4k
A Tale of Four Properties
chriscoyier
150
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Designing for humans not robots
tammielis
247
25k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
GitHub's CSS Performance
jonrohan
1023
450k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
The Invisible Customer
myddelton
114
12k
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/