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
How I Style Sheet
Search
Gregory McIntyre
February 18, 2014
Programming
1
72
How I Style Sheet
Tips on CSS and pointers to some best practices and guides
Gregory McIntyre
February 18, 2014
Tweet
Share
More Decks by Gregory McIntyre
See All by Gregory McIntyre
The Job Dance
puyo
0
44
Other Decks in Programming
See All in Programming
Team operations that are not burdened by SRE
kazatohiei
1
320
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
270
Porting a visionOS App to Android XR
akkeylab
0
590
GPUを計算資源として使おう!
primenumber
1
170
ふつうの技術スタックでアート作品を作ってみる
akira888
1
900
テスト駆動Kaggle
isax1015
1
430
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
160
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
240
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
260
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
590
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
110
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Scaling GitHub
holman
460
140k
Building Applications with DynamoDB
mza
95
6.5k
Agile that works and the tools we love
rasmusluckow
329
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Transcript
How I Style Sheet @gregmcintyre 2014
Ye Bad Olde Dayz
Repeated Values
Related Values
Repeated Selectors
Vendor Prefixes
Does Not Convey Intent
Cross Browser Pain
Specificity Wars
SASS (with Compass) ☑ DRY Values ☑ Calculate Values On-the-Fly
☑ DRY Selectors ☑ DRY Vendor Prefixes ☑ Convey Intent ☑ Cross Browser Compatibility
DRY Repeated Values
Calculate Values
DRYs Selectors
DRY Vendor Prefixes
Convey Intent
Cross Browserify
.scss or .sass ? Backwards compatibility with CSS Style rules
on one line Looks like vomit
Ye Bad Newe Dayz
CSS is First Class Code Good naming Separation of concerns
Code reviews Refactoring Bugs, verification, regressions
Good Code = Easy to Change Verifiable Reveals Intent DRY
Concise
None
Split Concerns
“OO” CSS
Twitter Bootstrap
Zurb Foundation
OOCSS Benefits Project scalability Browser render speed
SMACSS
SMACSS Style Layers Baseline Layout Modules States
Baseline CSS
Layout CSS
Module CSS
State CSS
Mixins or OOCSS?
Semantics
Level of Abstraction
Do I Need Strict Content Semantics? Different and wildly different
themes all at the same time? User edited markup? CMS?
SASS+OOCSS+SMACSS DRY selectors DRY values DRY media queries (@content) DRY
vendor prefixes (Compass) Minimise amount of code Fast render speed Conventions Clear intent
Good luck out there @gregmcintyre 2014