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

How I Style Sheet

Avatar for Gregory McIntyre Gregory McIntyre
February 18, 2014
Programming
1
73

How I Style Sheet

Tips on CSS and pointers to some best practices and guides

Avatar for Gregory McIntyre

Gregory McIntyre

February 18, 2014
Tweet

More Decks by Gregory McIntyre

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

Other Decks in Programming

See All in Programming
Automatic Grammar Agreementと Markdown Extended Attributes
について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
190
AIで開発はどれくらい加速したのか？AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
Avatar for どすこい daisuketakeda
1
2.5k
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
Avatar for Yoichiro Kubo heimusu
7
2.8k
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
130
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
230
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
Avatar for petamoriken / 森建 petamoriken
0
200
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
170
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
690
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
650
登壇資料を作る時に意識していること #登壇資料_findy
Avatar for konifar konifar
4
1.1k

Featured

See All Featured
Designing for Performance
Avatar for Lara Hogan lara
610
70k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
710
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
140
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
380
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.3k

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