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の設計と やってみて感じたこと
Search
Daisuke Konishi
December 02, 2017
Programming
0
160
最近やったCSSの設計と やってみて感じたこと
【CSS】Meetup Kansai U30 #2 #u30_kansai これまでの組み方とこれからどうしよっかって考えてる話
Daisuke Konishi
December 02, 2017
Tweet
Share
More Decks by Daisuke Konishi
See All by Daisuke Konishi
django-import-export で マスターデータ管理生活
dkonishi
0
200
Kansai WordPress Meetup@京都 近況とこれから
dkonishi
0
85
大阪Pythonの会の紹介@Python Kansai #01
dkonishi
1
150
Netlify Functions 叩き初め
dkonishi
0
150
Gatsby.jsでWordPressのフロントエンドを作る
dkonishi
0
270
AWS LambdaからSlackに ○○を送る
dkonishi
0
1.2k
Bench京都怖くない
dkonishi
0
160
WordBench京都への関わりと何を得たか
dkonishi
0
120
WordPress.comで数ヶ月 ブログを書いてみてわかったこと
dkonishi
0
1.7k
Other Decks in Programming
See All in Programming
VS Code をプロダクトにどう取り込むか
onomax
1
350
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
350
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
640
PHPはいつから死んでいるかの調査
chiroruxx
1
380
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
170
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
"config" ってなんだ? / What is "config"?
okashoi
0
240
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Milestoner
bkuhlmann
1
410
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
880
Netty Chicago Java User Group 2024-04-17
sullis
0
170
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
0
470
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
The Cost Of JavaScript in 2023
addyosmani
16
3.8k
Transcript
Meetup Kansai U30 #2 ࠷ۙͬͨCSSͷઃܭͱ ͬͯΈͯײͨ͜͡ͱ Daisuke KONISHI
Meetup Kansai U30 #2 Daisuke KONISHI @skd_nw coroutine inc. /
WebΤϯδχΞ WordBenchژ ϞσϨʔλʔ CSSϑϨϯζ
Meetup Kansai U30 #2 ࠷ۙͬͨ͜ͱΛॻ͍ͯ·͢
Meetup Kansai U30 #2 ࠷ۙస৬͠·ͨ͠ ϚʔΫΞοϓΤϯδχΞ ɹˣ WebΤϯδχΞ (WebϑϩϯτΤϯυଟΊ αʔόʔαΠυษڧத)
Meetup Kansai U30 #2 ͜Ε·Ͱ • தʙେنͷίʔϙϨʔταΠτ • ޙෳճߋ৽༗ΓͷLP ɹͷ࣮Λͯ͠·ͨ͠
Meetup Kansai U30 #2 ͜Ε·Ͱ • σβΠϯʹରԠ͢ΔͨΊϑϧεΫϥον • CSSϝλݴޠSassΛ༻ •
FLOCSS + Atomic Design • Codekit -> gulp(node-sass)
Meetup Kansai U30 #2 σβΠϯʹରԠ͢ΔͨΊ ϑϧεΫϥον σβΠφʔ͕දݱ͍ͨ͠ܗʹσβΠϯ͠ɺͦΕΛ ࣮͢Δελϯε ※σβΠφʔͳΜͱͳ࣮͘Λ͔͍ͬͯΔ ※࣮Ͱ͖Δ͔ෆ҆ͳͱ͖૬ஊ͢Δ(ਓ͍ͨ)
͜Ε·Ͱ
Meetup Kansai U30 #2 CSSϝλݴޠSassΛ༻ ࢿྉͷ๛͞ͱशಘͷ͔͢͠͞ΒSassΛ༻ ͜Ε·Ͱ
Meetup Kansai U30 #2 FLOCSS + Atomic Design • FLOCSSͷϨΠϠʔͷ͚ํ͕ྑ͔ͬͨ
https://github.com/hiloki/flocss • component ϨΠϠʔ͕ΒΈ͗͢ΔͨΊ Atomic DesignͷࢥͰׂ • BEMʹΑΔ֊ߏͷࢹ֮Խ ͜Ε·Ͱ
Meetup Kansai U30 #2 Codekit ͔Β gulp(node-sass) • GUIͰઃఆͰ͖ΔͨΊָͱ͍͏
• git Ͱ branch ΛΓସ͑Δʹ config ϑΝΠϧ͕ ߋ৽͞ΕΔ • ֎͢ΔࡍʹΞϓϦඇॴ࣋ => Node.js ͰແঈͰ୭Ͱ࡞ΕΔڥʹ ͜Ε·Ͱ
Meetup Kansai U30 #2 ͜Ε͔Βͷ࣮Ͱߟ͑Δ͜ͱ • WebαΠτͰͳ͘WebγεςϜͷ࣮ • ظతͳӡ༻ •
ϝϯόʔͷCSSशख़Λߟྀ • ݟͨΑΓ·ͣػೳʹϦιʔεΛׂ͘
Meetup Kansai U30 #2 ͜Ε͔Βͷ࣮(ߟ͑த) • CSSϑϨʔϜϫʔΫΛ࠾༻ • ઃܭFLOCSSϕʔε
Meetup Kansai U30 #2 CSSϑϨʔϜϫʔΫΛ࠾༻ • υΩϡϝϯτ͕͋ΔͷΛ༻͢Δ ͜ͱͰޙʑͷฤूΛΓ͘͢ • Foundation,
UI Kit, Bluma
Meetup Kansai U30 #2 ઃܭFLOCSSϕʔεʹ • Ҏલ·ͰͷߏͰΓ͖ΕΔਓ͕গͳ͍ => ·ͣFLOCSS(+BEM)ʹ׳ΕΔ •
ͦͦ͜Ε·ͰͷߏͰ·ͳ͖Ό͍ ͚ͳ͍ͷ͕গͳͦ͏ʁ
Meetup Kansai U30 #2 ͋͘·Ͱϕʔε ྟػԠมʹରԠ