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
72

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
44

Other Decks in Programming

See All in Programming
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
Avatar for Takahashi Ikki takahashiikki
1
110
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
Avatar for Tomoki Kobayashi temoki
0
340
Processing Gem ベースの、2D レトロゲームエンジンの開発
Avatar for tokujiros tokujiros
2
130
Android端末で実現するオンデバイスLLM 2025
Avatar for Masayuki Suda masayukisuda
1
170
アルテニア コンサル／ＩＴエンジニア向け 採用ピッチ資料
Avatar for ALTENIR altenir
0
110
rage against annotate_predecessor
Avatar for Junichi Kobayashi junk0612
0
170
今だからこそ入門する Server-Sent Events (SSE)
Avatar for NearMeの技術発表資料です nearme_tech
PRO
3
250
Updates on MLS on Ruby (and maybe more)
Avatar for sylph01 sylph01
1
180
AIでLINEスタンプを作ってみた
Avatar for kmuto eycjur
1
230
AI Coding Agentのセキュリティリスク：PRの自己承認とメルカリの対策
Avatar for さうす s3h
0
230
Laravel Boost 超入門
Avatar for Arlo fire_arlo
3
220
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
Avatar for Takumi Abe east_takumi
0
400

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
72
11k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Visualization
Avatar for Eitan Lees eitanlees
148
16k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
61k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.6k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
19k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.9k

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