Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How I Style Sheet

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Gregory McIntyre Gregory McIntyre
February 18, 2014
Programming
74
1

How I Style Sheet

Tips on CSS and pointers to some best practices and guides

Avatar for Gregory McIntyre

Gregory McIntyre

February 18, 2014

More Decks by Gregory McIntyre

See All by Gregory McIntyre
The Job Dance
Avatar for Gregory McIntyre puyo
0
48

Other Decks in Programming

See All in Programming
プラグインで拡張される Context をtype-safe にする難しさと設計判断
Avatar for kazupon kazupon
0
130
Hive Metastoreを通して学ぶIceberg REST Catalog ― 仕様から実装まで
Avatar for okumin okumin
0
140
Structured Concurrency, Scoped Values and Joiners in the JDK 25 26 27
Avatar for José josepaumard
1
150
RailsTokyo 2026#4: AI様があれば、
Hotwireの弱点は消えるか？
Avatar for Naofumi Kagami naofumi
2
340
SkillsをS3 Filesに置く時のあれこれ
Avatar for watany watany
3
1.6k
検索設計から
推論設計への重心移動と
Recall-First Retrieval
Avatar for po3rin po3rin
5
1.7k
【ディップ｜26年新卒研修資料】OpenAPI/Swagger REST API研修
Avatar for ディップ株式会社 dip_tech
PRO
0
170
Surviving Black Friday: 329 billion requests with Falcon!
Avatar for Samuel Williams ioquatix
0
3.2k
KMP × Kotlin 2.3 - How Android Got Slower While iOS Builds Improved by 47%
Avatar for Ryosuke Shimizu (RIO) rio432
0
200
Liberating Ruby's Parser from Lexer Hacks
Avatar for ydah ydah
2
2.7k
20260514 - build with ai 2026 - build LINE Bot with Gemini CLI
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
450
ローカルLLMでどこまでコードが書けるか / How much code can be written on a local LLM
Avatar for Naoki Kishida kishida
2
360

Featured

See All Featured
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.5k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
390
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.1k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.6k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
920
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
120
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
820
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
250
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
7.6k

Transcript

  1. How I Style Sheet @gregmcintyre 2014

  2. Ye Bad Olde Dayz

  3. Repeated Values

  4. Related Values

  5. Repeated Selectors

  6. Vendor Prefixes

  7. Does Not Convey Intent

  8. Cross Browser Pain

  9. Specificity Wars

  10. SASS (with Compass) ☑ DRY Values
 ☑ Calculate Values On-the-Fly


    ☑ DRY Selectors
 ☑ DRY Vendor Prefixes
 ☑ Convey Intent
 ☑ Cross Browser Compatibility

  11. DRY Repeated Values

  12. Calculate Values

  13. DRYs Selectors

  14. DRY Vendor Prefixes

  15. Convey Intent

  16. Cross Browserify

  17. .scss or .sass ? Backwards compatibility with CSS Style rules

    on one line Looks like vomit

  18. Ye Bad Newe Dayz

  19. CSS is First Class Code Good naming Separation of concerns

    Code reviews Refactoring Bugs, verification, regressions

  20. Good Code = Easy to Change Verifiable Reveals Intent DRY

    Concise
  21. None

  22. Split Concerns

  23. “OO” CSS

  24. Twitter Bootstrap

  25. Zurb Foundation

  26. OOCSS Benefits Project scalability Browser render speed

  27. SMACSS

  28. SMACSS Style Layers Baseline Layout Modules States

  29. Baseline CSS

  30. Layout CSS

  31. Module CSS

  32. State CSS

  33. Mixins or OOCSS?

  34. Semantics

  35. Level of Abstraction

  36. Do I Need Strict Content Semantics? Different and wildly different

    themes all at the same time? User edited markup? CMS?

  37. 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

  38. Good luck out there @gregmcintyre 2014