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設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
Search
Toro_Unit (Hiroshi Urabe)
April 12, 2016
Technology
7
3.2k
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
WP-D Week Day 2 「CSSについてLevel Up!」での発表資料です。
Toro_Unit (Hiroshi Urabe)
April 12, 2016
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
Cloudflare Meetup Nagano Vol.3
torounit
1
59
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.4k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.6k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.9k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
380
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
420
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
550
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
860
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.2k
Other Decks in Technology
See All in Technology
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
210
AIエージェント元年@日本生成AIユーザ会
shukob
1
250
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
300
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
2
160
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
190
プルリクエストレビューを終わらせるためのチーム体制 / The Team for Completing Pull Request Reviews
nekonenene
1
960
E2Eテスト自動化入門
devops_vtj
1
120
OPENLOGI Company Profile
hr01
0
60k
Pwned Labsのすゝめ
ken5scal
2
550
Охота на косуль у древних
ashapiro
0
120
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
240
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Agile that works and the tools we love
rasmusluckow
328
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Visualization
eitanlees
146
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Side Projects
sachag
452
42k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Site-Speed That Sticks
csswizardry
4
410
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Transcript
·ͩؒʹ߹͏ʮCSSઃܭʯ͜ͱ͡Ίɻ CSSͷҋʹҿΈࠐ·Εͳ͍ͨΊͷߟ͑ํɻ 2016.4.12 @WP-D Week Day 2 2016.4.12 @WP-D Week
Day 2 1
whoami ͜͡͠ΐ͏͔͍ 2016.4.12 @WP-D Week Day 2 2
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) Frontend Engineer / Web Designer
Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB Site: https://torounit.com 2016.4.12 @WP-D Week Day 2 3
ݝদຊࢢͬͯͱ͜ΖͰɺ ϑϦʔϥϯεͯ͠·͢ɻ Ͱ܈അݝग़ 2016.4.12 @WP-D Week Day 2 4
Profile • WordPress ͳਓͰ͢ɻύʔϚϦϯΫͷϓϥάΠϯ࡞ͬͨΓɺ ίΞίϯτϦϏϡʔλʔʹͳͬͨΓɺ͍Ζ͍Ζͬͯ·͢ɻ • CSSབྷΈͰɺ͍͍͢WordPressͷͨΊͷCSSͷͭ͘Γ ͔ͨ ͱ͔Ͱొஃͨ͠ΓɺBasis ͱ͍͏CSSϑϨʔϜϫʔΫʹ
ϓϧϦΫΛૹΓ͚ͭͨΓͯ͠·ͨ͠ɻ 2016.4.12 @WP-D Week Day 2 5
Ͱຊɻ 2016.4.12 @WP-D Week Day 2 6
օ͞Μɺ ͜Μͳܦݧ͋Γ·ͤΜ͔ʁ 2016.4.12 @WP-D Week Day 2 7
• 1Ҏ্લʹೲͨ͠Ҋ݅ͷमਖ਼ґཔɻ • ୭͕ॻ͍ͨͷ͔ྑ͘ղΒͳ͍Ҿ͖ܧ͗Ҋ݅ɻ • 1ສߦΛ༨༟Ͱ͑ͯΔCSSɻ • ΄ͱΜͲɺίϐϖίʔυͷڰتཚɻ • ͔͠ࡉ͔͍ͱ͜Ζ͕গͣͭ͠ҧͬͯΔɻ
2016.4.12 @WP-D Week Day 2 8
ʮطଘͷCSSʁ୭͕ಡΉ͔ʂʯ 2016.4.12 @WP-D Week Day 2 9
݁Ռ 2016.4.12 @WP-D Week Day 2 10
૿৩͢ΔṖͷɺʮfix.cssʯ, ʮappend.cssʯ, ʮcustom.cssʯ, etc... 2016.4.12 @WP-D Week Day 2 11
ͦͯ͠ੜ·ΕΔ important! ͷւɻ ୭৮Εͳ͍ CSS ͷੜɻ 2016.4.12 @WP-D Week Day
2 12
2016.4.12 @WP-D Week Day 2 13
ผʹ͜Εͬͯɺ͜͜࠷ۙͷ͡Όແ͍ΑͶ ... 2016.4.12 @WP-D Week Day 2 14
ਓྨʮCSS͍͠ʂʯͱ͍͏͜ͱʹ͍͍Ճݮʹؾ͖ͮ͘ɻ 2016.4.12 @WP-D Week Day 2 15
ͦΜͳࡢࠓͰ͕͢ɺ ϚϧνσόΠεରԠɺϨεϙϯγϒͩ ͱ͔Ͱɺ·͢·͘͢͠ͳΔCSS 2016.4.12 @WP-D Week Day 2 16
• IEͷҋ͔Β͍͍Ճݮൈ͚ग़ͨ͠ͱࢥͬͨͷʹ… • ͩΕͩΑ!!! HTML/CSS؆୯ͩͱ͔ݴౕͬͨ!!! 2016.4.12 @WP-D Week Day 2
17
͍ɻ 2016.4.12 @WP-D Week Day 2 18
Q. ͰɺਓྨͲ͏ͬͯCSSͱཱͪ ͔͑ྑ͍ͷ͔ʁ 2016.4.12 @WP-D Week Day 2 19
A. ΧΦεԽ͠ͳ͍Α͏ʹCSSΛॻ͘! 2016.4.12 @WP-D Week Day 2 20
ΧΦεԽ͠ͳ͍Α͏ͳCSS • ϖʔδɾཁૉͷՃ͕؆୯ʹͰ͖Δ͜ͱɻ͋Δఔ CSS ॻ͔ ͳͯ͘ग़དྷΔΑ͏ʹ͢Δ͜ͱɻͦͦCSSΛه͠ͳ͚ ΕւԽ͠ͳ͍ɻ • อकɾσβΠϯมߋ͕؆୯ʹͰ͖Δ͜ͱɻͲ͜Λ͍͡Εྑ ͍ͷ͔͕ɺΘ͔Γ͍͢͜ͱɻෆཁͳ
CSS ͕ΓͮΒ͍ɺӨ ڹ͠ਏ͍Α͏ʹ͢ΕɺCSSͷ্ॻ͖ࠈɺimportant ࠈ ͛Δɻ 2016.4.12 @WP-D Week Day 2 21
• ਓؒʹͱͬͯಡΈ͍͢͜ͱɻͦͦɺਓ͕ؒಡΉؾʹͳ Βͳ͍ or ಡΊͳ͍ CSS ͕ւԽ͠ͳ͍Θ͚͕ͳ͍ɻͱ͍͏ ͔طʹւɻ 2016.4.12 @WP-D
Week Day 2 22
Ͳ͏ͬͯʁ 2016.4.12 @WP-D Week Day 2 23
CSS Ͱ։ൃ͢Δ্ͰͷઓུΛཱͯΔɻ 2016.4.12 @WP-D Week Day 2 24
͜ͷઓུ = ʮCSSઃܭʯ 2016.4.12 @WP-D Week Day 2 25
Google ͷΤϯδχΞͷ Philip Walton ࢯ͕͜ͷ݅ʹ͍ͭͯॻ͍ ͨهࣄ͕ͪ͜ΒɻCSS Architecture — Philip Walton
• ຊޠ൛ɿCSS Architecture 2016.4.12 @WP-D Week Day 2 26
Philip Walton ࢯͷݴ͏ྑ͍ CSS ͷ݅ͱɻ • ༧ଌ͍͢͠ (PIEͷݪଇ) • ࠶ར༻͍͢͠
(DRYݪଇ) • อक͍͢͠ / ֦ு͍͢͠ (ΦʔϓϯɾΫϩʔζυͷݪଇ) 2016.4.12 @WP-D Week Day 2 27
ͦͷͨΊʹɺ࣮ફ͍ͯ͠Δ͜ͱɻ 2016.4.12 @WP-D Week Day 2 28
1. ͪΌΜͱ OOCSS Δ 2016.4.12 @WP-D Week Day 2 29
OOCSSͷ̎େݪଇ 1. ߏͱݟͨΛɻ 2. ίϯςφͱίϯςϯπͷɻ 2016.4.12 @WP-D Week Day 2
30
ߏͱݟͨͷ 2016.4.12 @WP-D Week Day 2 31
.submit-btn { display: inline-block; padding: 10px; color: #FFF; background: #66C;
} .link-btn { display: inline-block; padding: 10px; color: #333; background: #C90; } 2016.4.12 @WP-D Week Day 2 32
͜͏͠Α͏ 2016.4.12 @WP-D Week Day 2 33
/*Ϙλϯͷߏ*/ .btn { display: inline-block; padding: 10px; } /*Ϙλϯͷݟͨ*/ .btn-submit
{ color: #FFF; background: #66C; } .btn-link { color: #333; background: #C90; } 2016.4.12 @WP-D Week Day 2 34
ߏͱݟͨͷ͢ΔϝϦοτ 1.ίʔυͷॏෳ͕ආ͚ΒΕΔɻอकੑ্͕͕Δɻ 2.֦ு͕ͱͯ༻ҙʹͳΔɻ ྫ • Bootstrap ͷ Button 2016.4.12 @WP-D
Week Day 2 35
ίϯςφͱίϯςϯπͷ <aside class="sidebar"> <div> <img class="avatar" /> </div> </aside> .sidebar
.avatar { width: 200px; border: 5px solid #FFF; box-shadow: 0 2px 3px #000; } 2016.4.12 @WP-D Week Day 2 36
͜͏͠Α͏ 2016.4.12 @WP-D Week Day 2 37
<aside class="sidebar"> <div class="sidebar-widget"> <img class="avatar" /> </div> </aside> .sidebar-widget
{ /** ίϯςφ **/ width: 200px; } .avatar { /** ίϯςϯπ **/ width: 100%; border: 5px solid #FFF; box-shadow: 0 2px 3px #000; } 2016.4.12 @WP-D Week Day 2 38
ίϯςφͱίϯςϯπͷͷϝϦοτ 1. ॴɺίϯςΩετʹґଘ͠ͳ͍ίʔυ͕૿͑Δɻ 2. ࠶ར༻͍͢͠ʂ 3. αΠυόʔͷΟδΣοτʹɺ.widget { width: 200px
} Έ͍ͨͳ CSS ͱ͔Γ͕ͪͰ͚͢ͲɺϑολʔͰ͍ͨ ͍...͚Ͳԣ෯͍͕ͯ͠अຐ…ͳΜͯͷྑ͋͘Δɻ 2016.4.12 @WP-D Week Day 2 39
OOCSSͷྫ • Bootstrap • Foundation 2016.4.12 @WP-D Week Day 2
40
OOCSSͯ͢ͷجૅͳͷͰɺ͜Ε ຊʹ͔ͬ͠Γԡ͑͞Α͏ɻ 2016.4.12 @WP-D Week Day 2 41
ৄ͘͠ຊΛಡ͏ 2016.4.12 @WP-D Week Day 2 42
2.ࣄͷΓํ 2016.4.12 @WP-D Week Day 2 43
ϖʔδɺσβΠϯΧϯϓ͝ͱʹ CSS Λ࡞Βͳ ͍ɻίϯϙʔωϯτࢦͳ CSS Λɻ • ͜ΕΛΔͱ͍͍ͩͨɺ৽نϖʔδՃͷͨͼʹ CSS Λه
͢Δࣄଶ͕ى͜Δɻ • .page-privacy Έ͍ͨͳΫϥεΛbodyΛॻ͔ͳ͍ͱͩΊͳ CSSͱ͔ɺଞͷϖʔδͰ͍͍ͨͱ͖ɺͲ͏͢Δͷʁ • ൚༻ੑͷ͋ΔύʔπΛΈ߹ΘͤͯɺHTML ΛΜͰ͍͚Δ ͷΛࢦ͢͠ɻ 2016.4.12 @WP-D Week Day 2 44
CSSཧ͢Δɻ 1. Ϧηοτɾnormalize 2. ϕʔεͷHTMLཁૉͷCSS 3. ϨΠΞτɺύʔπͳͲͷίϯϙʔωϯτͷCSS ͱ͍͏ॱʹৄࡉͷ͍ॱͰॻ͍͍ͯ͘ɻ 2016.4.12 @WP-D
Week Day 2 45
HTMLɺίϯςϯπʹґଘ͠ͳ͍ɻ • HTMLɾίϯςϯπ͕มΘͬͯมΘΒͳ͍Α͏ʹCSSઃ ܭ͢Δɻ • Ϋϥε໊ɺίϯςϯπʹґଘ͢ΔͷͰͳ͘ɺػೳʹ ର໋໊ͯ͢͠ΔɻχϡʔεΤϯτϦʔʹରͯ͠ɺ.news-entry ͱ໋໊ͯ͠ɺͦͷޙͦΕΛళฮհͰ͏͜ͱʹͳͬͨ Γɻɻɻʢ࣮ʣ 2016.4.12
@WP-D Week Day 2 46
ҰͭͷίϯϙʔωϯτͰ͍Ζ͍ΖΓա͗ͳ͍ɻ • αΠυόʔͷΟδΣοτʹɺ.widget { width: 200px } Έ͍ͨͳ CSS ͱ͔Γ͕ͪͰ͚͢ͲɺϑολʔͰ͍ͨ
͍...͚Ͳԣ෯͍͕ͯ͠अຐ…ͳΜͯͷྑ͋͘Δɻ • ཁૉͱɺϨΠΞτͷͨΊͷ CSS ͔ͬ͠ΓׂɻઈରͰ αΠζॴΛࢦఆ͍ͯ͠Δͷཁҙɻ • ίϯςφʔͱίϯςϯπͷ͔ͬ͠Γɻ 2016.4.12 @WP-D Week Day 2 47
ηϨΫλʔͷڧ͞ՄೳͳݶΓऑ͘ɻ • ID ηϨΫλΘͳ͍ʂηϨΫλʔ͕ແବʹڧ͘ͳͬͯ ! important ࠈΛҾ͖ى͜͢ɻ·ͨɺIDηϨΫλʹɺϖʔ δϦϯΫͳͲͷׂ͋ΔͷͰίϯςϯπʹґଘ͕ͪ͠ɻ • .entry-body
h1 Έ͍ͨͳ͜ͱΓ͕ͪͰ͕͢ɺ͜͏͍ͬͨ CSS͕͋ͬͨΓ͢Δͱɺh1ʹΫϥεΛͯͯ...Έ͍ͨͳͱ͖ ʹ CSS ͕ద༻͞Εͳ͍ͷτϥϒϧ͕ɻɻɻ 2016.4.12 @WP-D Week Day 2 48
ཁૉʹґଘͨ͠ηϨΫλʔΘͳ͍ɻ • .comment .title, .entry .title ͷηϨΫλʔҰݟྑͦ͞͏ͩ ͚Ͳɺ.title ʹ CSS
͕͋ͨΒͳ͍ͳΜͯอূͳ͍͠ɺ.entry ͷதʹ .comment ͕ଘࡏͨ͠߹ͱ͔ɻɻɻ.comment- title, .entry-title ɺཁૉʹґଘ͠ͳ໋໊͍େࣄɻ • SMACSSͱ͔ɺBEMΛಋೖ͢Δͱָ͔ɻ 2016.4.12 @WP-D Week Day 2 49
ػೳɺίϯϙʔωϯτ͝ͱʹϑΝΠϧׂ͢Δ • Ұຕͷ CSS ϑΝΠϧʹΰϦΰϦॻ͍͍ͯ͘ͱɺͲ͏ͯ͠Ұ ͭͷػೳΛ࣮ݱ͢ΔͨΊͷ CSS͕ࢄͨ͠Γ͕ͪ͠ɻͳͷ Ͱɺػೳ͝ͱʹ CSS ϑΝΠϧΛׂ͢͠ɻ
• ҰͭͷίϯϙʔωϯτͰ͍Ζ͍ΖΓա͗ͯͳ͍͔ʁׂ͢ ͖͔ʁͷࢦʹͳΔɻ • Θͳ͍CSSΛൃݟ͍͢͠ɻ 2016.4.12 @WP-D Week Day 2 50
ຊจͳͲͷཁૉ͔ΒCSSΛॻ͍͍ͯ͘ɻ • Ϧηοτͷ͋ͱʹॻ͘ɺHTMLཁૉͷ CSS ͦͷαΠτͷ جຊͷσβΠϯɻ͜ΕΛ·͔ͣͬ͠Γ࣮͢Δɻຊจཝ༻ ʹɺ.main-contents h2 ͷ CSS
Λॻ͘ͷ࣮֬ʹ CSS Λෳ ࡶʹ͢Δɻ 2016.4.12 @WP-D Week Day 2 51
ΈΜͳͷຊಡΜͰɺ SMACSSͱ͔FLOCSS ͱ͔Ε͍͍Α!!! 2016.4.12 @WP-D Week Day 2 52
3. ৺ߏ͑ฤ 2016.4.12 @WP-D Week Day 2 53
ڧ͍৺Λ࣋ͱ͏ɻ • CSSΏΔ;Θݴޠɻ؆୯ʹյΕΔɻҰઃܭ͕ഁ͢Δ ͱɺͦͷ CSS ͷઃܭ͕৴༻Ͱ͖ͳ͘ͳΔɻ • Ϋιίʔυͷ͠Έɺٕज़ऀͱͯ͠ͷϓϥΠυॏཁɻ • ׂΕͨ૭ͷ๏ଇɺϘʔΠεΧτͷنଇ
2016.4.12 @WP-D Week Day 2 54
҆қͳίϐϖίʔυຑༀɻ • CSS ͕ແବʹ͘ͳͬͯɺւԽ͢ΔҰ൪ͷݩڟɻ • طଘͷίϯϙʔωϯτͷ֦ுͰग़དྷͳ͍ͷ͔Λߟ͑Α͏ɻ • ίϐϖͨ͘͠ͳͬͨͱ͖ɺઃܭΛݟ͢νϟϯεɻ 2016.4.12 @WP-D
Week Day 2 55
RefactoringʂRefactoringʂRefactoringʂ • CSS Λॻ͘ͱ͖ɺσβΠϯ͕ϒϥβͰ࠶ݱͰ͖ͨʂͰऴ ΘΓʹ͠ͳ͍ɻઈରϦϑΝΫλϦϯά͢Δʂ • طଘͷίϯϙʔωϯτͷ֦ுͰग़དྷΔ͜ͱɺҰͭͷίϯϙʔ ωϯτͷׂ͕େ͖͗͢Δέʔεଟʹଘࡏ͢Δɻ • CSS
์͓ͬͯ͘ͱ͙͢ʹෳࡶոحʹͳͬͯ͠·͏ͷͰɺৗ ʹγϯϓϧͳߏʹͳΔΑ͏ʹϦϑΝΫλϦϯά͠ͳ͕Β։ ൃ͍ͯ͘͜͠ͱɻ 2016.4.12 @WP-D Week Day 2 56
υΩϡϝϯτେࣄɻ • ͤΊͯɺϑΝΠϧׂͷϧʔϧɺ໋໊نͳͲυΩϡϝϯ τʹ͢ΔɻલͷઃܭͳΜ࣮ͯ֬ʹΕΔɻ • ΦϨΦϨઃܭͱ͔Ͳ͏ͤΕΔ͠มΘΔͷͰɺSMACSSͱ͔ FLOCSSͱ͔ͪΌΜͱυΩϡϝϯτͷ͋ΔͷΛ͏ͱ͍Ζ ͍Ζָɻ 2016.4.12 @WP-D
Week Day 2 57
ϦϑΝΫλϦϯάυΩϡϝϯτຖ ճΕͳ͍߹ͦ͜ɺͪΌΜͱͨ͠ ͷΛͭͬͯ͘ɺ͍ճͦ͏ɻ ͍ͭͰʹGithubͱ͔ʹஔ͍͓͍ͯͯOSSͱ͔ʹ͓ͯ͘͠ͱ͍Ζ͍ΖͤʹͳΕΔ͔ɻ 2016.4.12 @WP-D Week Day 2 58
·ͱΊ 2016.4.12 @WP-D Week Day 2 59
CSS ͕ੜ·Εͯ20ͪΐͬͱɺςʔϒϧϨΠΞτ͔Βͷస ͕ىͬͯ͜10͘Β͍ɻ·ͩ·ͩɺ͜Ε͔ΒมΘ͍ͬͯ͘Μͩ ͱࢥ͍·͢ɻ Γɺϓϩάϥϛϯάʹ͓͚Δઃܭͷϊϋ͔ͳΓೖͬ ͖͍ͯͯΔͷͰɺษڧͯ͠ΈΔͱɺ͍Ζ͍Ζཱͭࣝɾߟ͑ ͨํ͕खʹೖΓ·͢ɻϓϩάϥϛϯά͕ղΒͳͯ͑͘Δ͜ ͱଟ͍Ͱ͢ɻ ϓϩάϥϛϯάݪଇҰཡ -
Strategic Choice ΦϒδΣΫτࢦઃܭݪଇ - Strategic Choice 2016.4.12 @WP-D Week Day 2 60
ΏΔ;Θݴޠͳ CSS ౖΓ൵͠ΈΛ֮͑Δ͜ͱ͜Ε͔Β ଟ͍ͱࢥ͍·͕͢ɺWEBσβΠϯͷѪɺΤϯδχΞͱͯ͠ͷ ϓϥΠυΛ࣋ͬͯΓӽ͍͖͑ͯ·͠ΐ͏ɻ 2016.4.12 @WP-D Week Day 2
61
͓ΘΓɻ Follow Me! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB
Site: https://torounit.com 2016.4.12 @WP-D Week Day 2 62