CSS Architecture

Transcript

1. CSS Architecture Sota Yamashita
2. 㿊♴괝㣕 @sota0805 Software Engineer @SIROK, Inc. - NodeSchool Tokyo member
3. ༧ଌ͠΍͍͢ ࠶ར༻͠΍͍͢ อक͠΍͍͢ ֦ு͠΍͍͢ http://philipwalton.com/articles/css-architecture/ CSS Architecture
4. HOW?
5. https://twitter.com/itcss_io
6. settings tools . generic base objects components trumps $ tree Generic Explicit Far-reaching Localized Low-specificity High-specificity
7. settings tools . generic base objects components trumps $ tree Generic Explicit Far-reaching Localized Low-specificity High-specificity ม਺ͳͲΛఆٛͨ͠ϑΝΠϧ
8. settings tools . generic base objects components trumps $ tree Generic Explicit Far-reaching Localized Low-specificity High-specificity mixin΍functionͷϑΝΠϧ
9. settings tools . generic base objects components trumps $ tree Generic Explicit Far-reaching Localized Low-specificity High-specificity resetsɾnomalizeϑΝΠϧ౳
10. settings tools . generic base objects components trumps $ tree Generic Explicit Far-reaching Localized Low-specificity High-specificity elements
11. settings tools . generic base objects components trumps $ tree Generic Explicit Far-reaching Localized Low-specificity High-specificity OOCSSͰ͍͏ͱ͜ΖͷɺStructure
12. settings tools . generic base objects components trumps $ tree Generic Explicit Far-reaching Localized Low-specificity High-specificity OOCSSͰ͍͏ͱ͜ΖͷɺSkin
13. settings tools . generic base objects components trumps $ tree Generic Explicit Far-reaching Localized Low-specificity High-specificity ্ॻ͖ϑΝΠϧ
14. ༧ଌ͠΍͍͢ Predictable
15. #widgetView header { // } #widgetView body{ // } #widgetView footer{ // }
16. ࠶ར༻͠΍͍͢ Reusable
17. settings tools . trumps generic base objects $ tree Generic Explicit Far-reaching Localized Low-specificity High-specificity OOCSSͰ͍͏ͱ͜ΖͷɺStructure components OOCSSͰ͍͏ͱ͜ΖͷɺSkin
19. อक͠΍͍͢ Maintainable
20. settings tools . trumps generic base objects $ tree Generic Explicit Far-reaching Localized Low-specificity High-specificity OOCSSͰ͍͏ͱ͜ΖͷɺStructure components OOCSSͰ͍͏ͱ͜ΖͷɺSkin
21. ֦ு͠΍͍͢ Expandable
22. settings tools . trumps generic base objects $ tree Generic Explicit Far-reaching Localized Low-specificity High-specificity OOCSSͰ͍͏ͱ͜ΖͷɺStructure components OOCSSͰ͍͏ͱ͜ΖͷɺSkin ม਺ͳͲΛఆٛͨ͠ϑΝΠϧ
23. Great References
24. ʰWeb੍࡞ऀͷͨΊͷCSSઃܭͷڭՊ ॻ ϞμϯWeb։ൃʹ͔ܽͤͳ͍ʮमਖ਼ ͠΍͍͢CSSʯͷઃܭख๏ʱ CSSͦͷ΋ͷͱઃܭํ๏͍ͭͯཧղ͢Δ
25. CSS Reference Discover more about it and what features we've added to make learning CSS more easy and practical. http://tympanus.net/codrops/css_reference/ ։ൃதͷCSS΁ͷٙ໰Λղܾ͢Δ
26. CSSΛ؆୯ʹࢼͯ͠ΈΔ JSFiddle ؆୯ʹHTMLɾCSSɾJavascript ΛͨΊ͢͜ͱ͕Ͱ͖·͢ɻ·ͨ jQueryͳͲͷϥΠϒϥϦΛ࢖͑ͨ Γ֎෦ͷϥΠϒϥϦ΋࢖͏͜ͱ ͕Ͱ͖·͢ɻ http://jsfiddle.net/
27. ϑϩϯτ΁ͷΑΓਂ͍஌ࣝΛ͚ͭΔ frontend-feeds frontend-feeds͸΋ͱ΋ͱPaul IrishʹΑͬͯ࡞੒͞Εͨ΋ͷͰͨ ͩfeedly΁ͷimport͕Ͱ͖ͨͳ ͔ͬͨͷͰͦΕΛमਖ਼ͨ͠΋ͷ Ͱ͢ɻ https://github.com/sotayamashita/frontend-feeds
28. Question?