Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Architecture
Search
Sam Yamashita
March 05, 2015
Programming
1
62
CSS Architecture
Sam Yamashita
March 05, 2015
Tweet
Share
More Decks by Sam Yamashita
See All by Sam Yamashita
AI が自動テストの分野でどのように使われるのか
unbabel
0
140
Thailand
unbabel
1
82
DX に優れた多言語化ドキュメント作成方法
unbabel
0
490
3 Tips for meeting
unbabel
0
220
What is GitHub Marketplace and good for?
unbabel
0
110
OSS 翻訳と GitLocalize
unbabel
0
460
Redux in Production
unbabel
1
280
Introduction to RAIL
unbabel
0
90
Git・Githubに関する隠された便利な機能
unbabel
1
390
Other Decks in Programming
See All in Programming
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1.1k
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
190
Fragment Composition of GraphQL
quramy
13
1.5k
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
Git Rebase
bkuhlmann
11
1.6k
Site Reliability Engineering for GMO
pyama86
9
1.1k
Polars入門
daikikatsuragawa
1
190
Deep Dive into React Stream/Serialize
mugi_uno
3
740
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
140
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
330
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
530
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.8k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
273
22k
A designer walks into a library…
pauljervisheath
201
23k
How STYLIGHT went responsive
nonsquared
92
4.8k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Producing Creativity
orderedlist
PRO
338
39k
Side Projects
sachag
451
41k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Why Our Code Smells
bkeepers
PRO
331
56k
Docker and Python
trallard
35
2.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Transcript
CSS Architecture Sota Yamashita
㿊♴괝㣕 @sota0805 Software Engineer @SIROK, Inc. - NodeSchool Tokyo member
༧ଌ͍͢͠ ࠶ར༻͍͢͠ อक͍͢͠ ֦ு͍͢͠ http://philipwalton.com/articles/css-architecture/ CSS Architecture
HOW?
https://twitter.com/itcss_io
settings tools . generic base objects components trumps $ tree
Generic Explicit Far-reaching Localized Low-specificity High-specificity
settings tools . generic base objects components trumps $ tree
Generic Explicit Far-reaching Localized Low-specificity High-specificity มͳͲΛఆٛͨ͠ϑΝΠϧ
settings tools . generic base objects components trumps $ tree
Generic Explicit Far-reaching Localized Low-specificity High-specificity mixinfunctionͷϑΝΠϧ
settings tools . generic base objects components trumps $ tree
Generic Explicit Far-reaching Localized Low-specificity High-specificity resetsɾnomalizeϑΝΠϧ
settings tools . generic base objects components trumps $ tree
Generic Explicit Far-reaching Localized Low-specificity High-specificity elements
settings tools . generic base objects components trumps $ tree
Generic Explicit Far-reaching Localized Low-specificity High-specificity OOCSSͰ͍͏ͱ͜ΖͷɺStructure
settings tools . generic base objects components trumps $ tree
Generic Explicit Far-reaching Localized Low-specificity High-specificity OOCSSͰ͍͏ͱ͜ΖͷɺSkin
settings tools . generic base objects components trumps $ tree
Generic Explicit Far-reaching Localized Low-specificity High-specificity ্ॻ͖ϑΝΠϧ
༧ଌ͍͢͠ Predictable
#widgetView header { // } #widgetView body{ // } #widgetView
footer{ // }
࠶ར༻͍͢͠ Reusable
settings tools . trumps generic base objects $ tree Generic
Explicit Far-reaching Localized Low-specificity High-specificity OOCSSͰ͍͏ͱ͜ΖͷɺStructure components OOCSSͰ͍͏ͱ͜ΖͷɺSkin
None
อक͍͢͠ Maintainable
settings tools . trumps generic base objects $ tree Generic
Explicit Far-reaching Localized Low-specificity High-specificity OOCSSͰ͍͏ͱ͜ΖͷɺStructure components OOCSSͰ͍͏ͱ͜ΖͷɺSkin
֦ு͍͢͠ Expandable
settings tools . trumps generic base objects $ tree Generic
Explicit Far-reaching Localized Low-specificity High-specificity OOCSSͰ͍͏ͱ͜ΖͷɺStructure components OOCSSͰ͍͏ͱ͜ΖͷɺSkin มͳͲΛఆٛͨ͠ϑΝΠϧ
Great References
ʰWeb੍࡞ऀͷͨΊͷCSSઃܭͷڭՊ ॻ ϞμϯWeb։ൃʹ͔ܽͤͳ͍ʮमਖ਼ ͍͢͠CSSʯͷઃܭख๏ʱ CSSͦͷͷͱઃܭํ๏͍ͭͯཧղ͢Δ
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ͷٙΛղܾ͢Δ
CSSΛ؆୯ʹࢼͯ͠ΈΔ JSFiddle ؆୯ʹHTMLɾCSSɾJavascript ΛͨΊ͢͜ͱ͕Ͱ͖·͢ɻ·ͨ jQueryͳͲͷϥΠϒϥϦΛ͑ͨ Γ֎෦ͷϥΠϒϥϦ͏͜ͱ ͕Ͱ͖·͢ɻ http://jsfiddle.net/
ϑϩϯτͷΑΓਂ͍ࣝΛ͚ͭΔ frontend-feeds frontend-feedsͱͱPaul IrishʹΑͬͯ࡞͞ΕͨͷͰͨ ͩfeedlyͷimport͕Ͱ͖ͨͳ ͔ͬͨͷͰͦΕΛमਖ਼ͨ͠ͷ Ͱ͢ɻ https://github.com/sotayamashita/frontend-feeds
Question?