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
スタイル警察24時 / style police 24h
Search
otsuky
December 20, 2019
Technology
1
400
スタイル警察24時 / style police 24h
みんなでいいCSS書いていこうなって話
otsuky
December 20, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
複雑なビジネスルールに挑む:正確性と効率性を両立するfp-tsのチーム活用術 / Strike a balance between correctness and efficiency with fp-ts
kakehashi
5
3.5k
AI JIMY - 登壇(インストール編)
hanacchi
0
150
LINEヤフーのウェブアクセシビリティ
lycorptech_jp
PRO
2
150
スクラムに出会って「できた」を実感できるようになってきた話 / Scrum makes me feel like I can do it
yayoi_dd
2
110
知識と実践を紡ぐGenAI / Connecting Knowledge and experience with GenAI
aki_moon
2
170
SWC Transformerから見るTypeScript関数記述ベストプラクティス
fujiyamaorange
1
170
Kaggleで学ぶ系列データのための深層学習モデリング
yu4u
7
1.7k
能動学習のいろは:書籍「Human-in-the-Loop機械学習」3〜5章
hiroyoshiito
0
290
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
130
株式会社EventHub・エンジニア採用資料
eventhub
0
2.1k
開発スピードの維持向上を支える、テスト設計の 漸進的進化への取り組み / Continuous Test Design Development for Speed of Product Development
ropqa
0
180
RubyKaigi 2024 - Make Your Own Regex Engine!
makenowjust
0
140
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Clear Off the Table
cherdarchuk
86
310k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
Atom: Resistance is Futile
akmur
260
25k
A better future with KSS
kneath
231
16k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Designing for humans not robots
tammielis
247
25k
It's Worth the Effort
3n
180
27k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Facilitating Awesome Meetings
lara
43
5.6k
Transcript
ελΠϧܯ ࣌ ★ ★ ★ ★ ★ ★ ★ ★
2 େ݄ ༎Ղࢠ ࡀͰԦͷૉ࣭Λ։Ֆͤ͞Δͱ༧ݴΛड͚Δ ˔ ۙگ ˔ ͖ͳ$44ϧʔϧηοτ QPJOUFSFWFOUTOPOF QPTJUJPOTUJDLZ
@yukako_otsuki
3 ࠓಛʹ ৽͍͠͠·ͤΜ
4 $44ͷΛ͠·͢
5 ྑ͍ελΠϧͬͯ ͳΜͩΖ͏
6 ѱ͍ελΠϧͬͯ ͳΜͩΖ͏
7 ϨϏϡʔͷ࣌ʹେʹ͍ͯ͠Δ؍ ύϑΥʔϚϯε ։ൃޮ σβΠϯ࠶ݱੑ ύϑΥʔϚϯε
8 ։ൃޮ
9 The Goals of Good CSS Architecture ϝϯςφϯεੑ ˔ 1SFEJDUBCMF
ʜ༧ଌ͍͢͠ ˔ 3FVTBCMF ʜ࠶ར༻͍͢͠ ˔ .BJOUBJOBCMF ʜอक͍͢͠ ˔ 4DBMBCMF ʜ֦ு͍͢͠ https://philipwalton.com/articles/css-architecture/
10 Predictable ༧ଌ͍͢͠ “༧ଌՄೳͳ$44ɺϧʔϧ͕ظͲ͓Γʹಈ࡞͢Δ͜ͱΛҙຯ ͠·͢ɻ ϧʔϧΛՃ·ͨߋ৽͢Δ߹ɺҙਤ͠ͳ͍αΠτͷ෦ʹ ӨڹΛ༩͑ͯͳΓ·ͤΜɻ
11 Not predictableͳελΠϧ
12 Not predictableͳελΠϧ ˔ ελΠϧΛଧͪফ͍ͯ͠Δ ˔ ηϨΫλʹΫϥεͱλά͕ࠞࡏ͍ͯ͠Δ ˔ Ϋϥε໊ͱݟ͕ͨҰக͠ͳ͍ ˔
ηϨΫλͷৄࡉ͕ೖΓཚΕ͍ͯΔ
13 Reusable “$44ϧʔϧநతͰɺेʹ͞Ε͍ͯΔඞཁ͕͋Γ·͢ɻ ͜ΕʹΑΓɺطʹղܾͨ͠ύλʔϯΛ࠶ίʔσΟϯά͢ Δ͜ͱͳ͘ɺطଘͷύʔπ͔Β৽͍͠ίϯϙʔωϯτΛ͢ ͘ߏஙͰ͖·͢ɻ ࠶ར༻͍͢͠
14 Maintainable “αΠτͰ৽͍͠ίϯϙʔωϯτػೳΛՃɺߋ৽ɺ࠶ஔ͢ Δඞཁ͕͋Δ߹ɺطଘͷ$44ΛϦϑΝΫλϦϯά͢Δඞཁ͕ ͋Γ·ͤΜɻ ίϯϙʔωϯτ9ΛϖʔδʹՃͯ͠ɺͦͷଘࡏ͚ͩͰίϯ ϙʔωϯτ:͕յΕ͍͚ͯ·ͤΜɻ อक͍͢͠
15 Scalable “εέʔϥϒϧͳ$44ɺҰਓ·ͨେنͳΤϯδχΞ ϦϯάνʔϜ͕؆୯ʹཧͰ͖Δ͜ͱΛҙຯ͠·͢ɻ ·ͨɺେͳֶशۂઢΛඞཁͱͤͣʹɺαΠτͷ$44Ξ ʔΩςΫνϟʹ؆୯ʹΞΫηεͰ͖·͢ɻ ֦ு͍͢͠
16 ScalableͳελΠϧʹ͢ΔͨΊʹ ίϯϙʔωϯτઃܭʹΑΓ ؔ৺ͷɾΧϓηϧԽΛߦ͏ ˣ $44JO+4PS$44ઃܭख๏ΛऔΓೖΕΔ
17 σβΠϯ࠶ݱੑ
18 σβΠϯ࠶ݱੑ σβΠϯ௨Γͷݟͨʹͳ͍ͬͯΔ͔
19 σβΠϯ௨Γͷݟͨͱ ϝϯςφϯεੑ ˔ ΟϯυαΠζΛม͑ͨ࣌ ˔ ΟϯυͷॎԣදࣔΛม͑ͨ࣌ ˔ ಈతʹऔಘ͢ΔՕॴʹσβΠϯσʔλҎ֎ͷσʔλ͕ೖ ͖ͬͯͨ࣌
˔ $ISPNFҎ֎ͷϒϥβͰදࣔͨ࣌͠ ˔ ϒϥβͷػೳͰςΩεταΠζΛมߋͨ࣌͠ ˔ ֦େɾॖখදࣔͨ࣌͠
20 σβΠϯ௨Γͷݟͨͱ ϝϯςφϯεੑ ˔ ΟϯυαΠζΛม͑ͨ࣌ ˔ ΟϯυͷॎԣදࣔΛม͑ͨ࣌ ˔ ಈతʹऔಘ͢ΔՕॴʹσβΠϯσʔλҎ֎ͷσʔλ͕ೖ ͖ͬͯͨ࣌
˔ $ISPNFҎ֎ͷϒϥβͰදࣔͨ࣌͠ ˔ ϒϥβͷػೳͰςΩεταΠζΛมߋͨ࣌͠ ˔ ֦େɾॖখදࣔͨ࣌͠ ද่͕ࣔΕͳ͍͔ σβΠφʔ͞Μͷҙਤ͕͖ͪΜͱө͞Ε͍ͯΔ͔
21 ύϑΥʔϚϯε
22 ύϑΥʔϚϯεΛߟྀͨ͠ελΠϧ ϝϯςφϯεੑ ˔ %0.ΛඞཁҎ্ʹਂ͘ͳ͍ ʜϚονϯά͢ΔηϨΫλΛ૯ͨΓͰ୳͢ ˔ ແବͳελΠϧ͕ͳ͍ ʜελΠϧඞཁͳͱ͜Ζʹඞཁͳ͚ͩ ʜϕϯμʔϓϨϑΟοΫεͷ࠷దԽ
˔ ϨϯμϦϯάͷෛՙ͕ߟྀ͞Ε͍ͯΔ ʜϝσΟΞΫΤϦͷ࠷దԽ ʜ$44Ξχϝʔγϣϯͷ࠷దԽ ˔ ηϨΫλ͕࠷దԽ͞Ε͍ͯΔ ʜηϨΫλӈ͔Βࠨর߹͞ΕΔ ʜࢠଙɾؒɾશশηϨΫλͷଟ༻Λආ͚Δ
23 $44JO+4ʹΑΔ Ըܙ
24 $44JO+4ʹΑΔԸܙ ։ൃޮ ύϑΥʔϚϯε ਓ͕ؒࣗΒߟ͑ͳ͚Εͳͯ͘࠷ݶ୲อͰ͖ΔϨϕϧ্͕͕ͬͨ
25 Α͋͘Δ ୁัࣄҊ
26
27 JNQPSUBOU Λࢦఆ͍ͯ͠Δ
28 JNQPSUBOU Λࢦఆ͍ͯ͠Δ ! ৄࡉઃܭͷΧΦεԽ͕ଅਐͯ͠͠·͍·͢ Ͳ͏ͯ͠ͷ߹ίϝϯτʹཧ༝Λڙड़͠·͠ΐ͏
29 ෆཁͳελΠϧ͕ ଘࡏ͢Δ
30 ෆཁͳελΠϧ͕ ଘࡏ͢Δ ! σβΠϯσʔλ͔ΒίϐϖͨελΠϧΛ ͦͷ··͍͚ͬͯ·ͤΜ
31 ྫ֎GMFYCBTJT WBMVF͕zzͷͱ͖ʹ ୯Ґ͕ࢦఆ͞Ε͍ͯΔ
32 ྫ֎GMFYCBTJT WBMVF͕zzͷͱ͖ʹ ୯Ґ͕ࢦఆ͞Ε͍ͯΔ ! ෆཁͳͷॻ͔͔ͳ͍ͷ͕ݪଇͰ͢
33 MJOFIFJHIUʹ ୯Ґ͕ࢦఆ͞Ε͍ͯΔ
34 MJOFIFJHIUʹ ୯Ґ͕ࢦఆ͞Ε͍ͯΔ ! ϒϥβͷػೳͰจࣈΛେ͖ͨ࣌͘͠ʹද่͕ࣔΕ·͢
35 NBSHJO͕ ૬ࡴ͞Ε͍ͯΔ
36 NBSHJO͕ ૬ࡴ͞Ε͍ͯΔ ! मਖ਼ͨ͠Γ࠶ར༻ͨ͠Γ͢Δࡍʹ͏·͍͔͘ͳ͍ݪҼʹͳΓ·͢
37 ࣏҆ҡ࣋ͷ ৬࣭ ͷϧʔϧ
38 IFJHIU͕ܾΊଧͪͰ ࢦఆ͞Ε͍ͯΔ
39 ωΨςΟϒNBSHJO
40 qFYCPYҎ֎Ͱͷԣฒͼ PS(SJE-BZPVU
41 qFYCPYҎ֎Ͱ্Լதԝدͤ PS(SJE-BZPVU
42 BCTPMVUFΛࢦఆ͍ͯ͠Δ ཁૉͷલʹ SFMBUJWFͷཁૉ͕͍ͳ͍
43 ࣏҆ҡ࣋ʹ༗ޮͳ ϕετ ϓϥΫςΟε
44 NBSHJOͷ͖Λଗ͑Δ
45 GPOUTJ[Fͷ ୯ҐzSFNz
46 CPYTJ[JOHCPSEFSCPY Λࢦఆ͢Δ
47 πʔϧΛར༻͢Δ
48 ݸݸ ࡉ͔͍͜ͱ͚ͩͲ
49
50 ͏ʔΜ৮ͬͯͳ͍ϖʔδͷ ελΠϧ͕มΘͬͪΌͬͯΔΑ͓
51 ࣗ·ͩ·ͩ
52 ΈΜͳͰ͍͍$44 ॻ͍͍ͯ͜͏ͳʂ
53