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

Crafting Scalable Stylesheets

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Mike Fowler Mike Fowler
September 22, 2012
Programming
1.1k
15

Crafting Scalable Stylesheets

A discussion of some ways we can use Sass and Compass to help us create scalable and maintainable stylesheets.

A PDF with slide notes can be found here: http://bit.ly/NJps8S

Avatar for Mike Fowler

Mike Fowler

September 22, 2012

Other Decks in Programming

See All in Programming
New "Type" system on PicoRuby
Avatar for pocke pocke
1
730
Hunting Vulnerabilities in Symfony with LLMs
Avatar for Vincent Amstoutz vinceamstoutz
0
520
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
Avatar for tk3fftk tk3fftk
5
680
プロパティの順序で型推論が壊れる!? TypeScript6.0の修正からContext-Sensitivityの仕組みを追う
Avatar for おおいし bicstone
2
1.3k
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
Avatar for nrs nrslib
6
850
Composerを使ったサプライチェーン攻撃の様子を眺めてみる #phpstudy
Avatar for hideki kinjyo o0h
PRO
2
240
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
330
ユニットテストの先へ：テスト技法で要求・仕様を整理するJava開発実践 / Beyond_Unit_Testing_Practical_Java_Development_Techniques_for_Organizing_Requirements_and_Specifications
Avatar for SHIMANE, Yoshikazu shimashima35
0
380
過去最大のMCPアップデート! 2026-07-28 RC版の謎に迫る
Avatar for matsukada licux
5
180
エージェンティックRAGにAWSで入門しよう！
Avatar for Har1101 har1101
8
1.3k
TAKTでAI駆動開発の品質を設計する
Avatar for かとじゅん j5ik2o
6
1.1k
AIで効率化できた業務・日常
Avatar for Ochtum ochtum
0
120

Featured

See All Featured
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
360
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
220
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.5k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
280
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
140
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
190
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
480

Transcript

  1. CRAFTING SCALABLE STYLESHEETS Mike Fowler @michaelrfowler VT CodeCamp 2012

  2. None

  3. www.sass-lang.org

  4. www.compass-style.com

  5. WE WANT MAINTAINABILITY AND SCALABILITY

  6. WE WANT NEED MAINTAINABILITY AND SCALABILITY

  7. CSS IS A PUSHOVER

  8. FILE STRUCTURE •Logical grouping •Modular architecture •Inline documentation

  9. SEMANTICS

  10. SEMANTICS CONTENT-DEPENDENT CONTENT-INDEPENDENT

  11. None
  12. None

  13. OBJECT-ORIENTED CSS

  14. None
  15. None
  16. None
  17. None
  18. None

  19. @EXTEND FOR GREAT GOOD

  20. None
  21. None
  22. None
  23. None
  24. None

  25. CENTRALIZE YOUR APPLICATION SETTINGS

  26. None

  27. VARIABLES SIMPLIFY COMMON STYLESHEET UPDATES

  28. None
  29. None
  30. None

  31. VARIABLE SEMANTICS

  32. “SMART” VARIABLES

  33. None
  34. None
  35. None

  36. • Frequently changed • Time-consuming to maintain • -webkit-f*#k: this;

    BROWSER PREFIXES
  37. None
  38. None

  39. READABLE MEDIA QUERIES

  40. None
  41. None
  42. None
  43. None
  44. None
  45. None

  46. MIXINS HELP TO CONTEXTUALIZE COMPLEX CODE

  47. None
  48. None

  49. MEET http://susy.oddbird.net/

  50. MEET http://susy.oddbird.net/

  51. None
  52. None

  53. STYLE GUIDES

  54. https://github.com/styleguide/css/1.0

  55. https://github.com/styleguide/css/1.0

  56. http://warpspire.com/kss/

  57. http://jacobrask.github.com/styledocco/

  58. KEEP DOCUMENTATION USEFUL AND UPDATED

  59. GET STARTED NOW

  60. http://livereload.com/

  61. http://incident57.com/codekit/

  62. http://mhs.github.com/scout-app/

  63. PREPROCESSORS ENCOURAGE RETHINKING

  64. RETHINKING ENCOURAGES NEW TECHNIQUES

  65. NEW TECHNIQUES PROGRESS OUR CRAFT

  66. THANK YOU Tweet: @michaelrfowler Blog: mikefowler.me Mail: [email protected] https://speakerdeck.com/u/mikefowler/