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
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
930
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
Is Xcode slowly dying out in 2025?
uetyo
1
280
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
170
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
10k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
780
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
生成AI時代のコンポーネントライブラリの作り方
touyou
1
230
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
110
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.6k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Invisible Side of Design
smashingmag
301
51k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing for Performance
lara
610
69k
Code Review Best Practice
trishagee
69
19k
Documentation Writing (for coders)
carmenintech
72
4.9k
Designing Experiences People Love
moore
142
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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