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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Sam Yamashita
March 05, 2015
Programming
1
74
CSS Architecture
Sam Yamashita
March 05, 2015
Tweet
Share
More Decks by Sam Yamashita
See All by Sam Yamashita
AI が自動テストの分野でどのように使われるのか
unbabel
0
150
Thailand
unbabel
1
86
DX に優れた多言語化ドキュメント作成方法
unbabel
0
530
3 Tips for meeting
unbabel
0
280
What is GitHub Marketplace and good for?
unbabel
0
110
OSS 翻訳と GitLocalize
unbabel
0
540
Redux in Production
unbabel
1
310
Introduction to RAIL
unbabel
0
110
Git・Githubに関する隠された便利な機能
unbabel
1
410
Other Decks in Programming
See All in Programming
Grafana:建立系統全知視角的捷徑
blueswen
0
330
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
250
コマンドとリード間の連携に対する脅威分析フレームワーク
pandayumi
1
450
AtCoder Conference 2025
shindannin
0
1k
AI前提で考えるiOSアプリのモダナイズ設計
yuukiw00w
0
220
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
izumin5210
6
1.8k
15年続くIoTサービスのSREエンジニアが挑む分散トレーシング導入
melonps
2
180
なぜSQLはAIぽく見えるのか/why does SQL look AI like
florets1
0
450
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
300
AIによる高速開発をどう制御するか? ガードレール設置で開発速度と品質を両立させたチームの事例
tonkotsuboy_com
7
2k
組織で育むオブザーバビリティ
ryota_hnk
0
170
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
kekekenta
0
200
Featured
See All Featured
A Soul's Torment
seathinner
5
2.2k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
430
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
Scaling GitHub
holman
464
140k
Evolving SEO for Evolving Search Engines
ryanjones
0
120
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
170
Building Adaptive Systems
keathley
44
2.9k
Making the Leap to Tech Lead
cromwellryan
135
9.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
30 Presentation Tips
portentint
PRO
1
210
Un-Boring Meetings
codingconduct
0
200
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?