Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
大塚真言
January 31, 2020
Programming
2
610
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
大塚真言
January 31, 2020
Tweet
Share
More Decks by 大塚真言
See All by 大塚真言
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
24
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
36
ユースケース駆動開発で自社プロダクトを作ってみた!
shingen29
1
1.6k
MDN Web Docsから学ぶ 公式ドキュメントを読むメリット
shingen29
0
460
PHP8をざっくり解説してみる
shingen29
0
140
最近のプロジェクトを振り返ってみる
shingen29
0
210
Stripe CLIを触ってみた!
shingen29
1
150
プロジェクト管理ツールとしてGitLabと向き合ってみる
shingen29
0
21
FirestoreのGeoPoint型を使いこなす
shingen29
1
310
Other Decks in Programming
See All in Programming
Power Automateドリブンのチームマネジメント
hanaseleb
0
200
Chart実装が楽になりました。
keisukeyamagishi
0
120
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
yasuakiomokawa
2
500
実践エクストリームプログラミング / Extreme Programming in Practice
enk
1
570
即、New Relic / New Relic NOW!
uzulla
0
340
Jetpack Compose best practices 動画紹介 @GoogleI/O LT会
takakitojo
0
400
プロダクトのタイプ別 GraphQL クライアントの選び方
shozawa
0
5.7k
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
5
260
Managing Error Messages with your Oracle Database REST APIs
thatjeffsmith
0
160
チームでカレーを作ろう!アジャイルカレークッキング
akitotsukahara
0
890
GDG Seoul IO Extended 2022 - Android Compose
taehwandev
0
330
社用PCのdotfiles管理 / dotfiles-in-company
yammerjp
0
140
Featured
See All Featured
Docker and Python
trallard
27
1.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Adopting Sorbet at Scale
ufuk
63
7.6k
Automating Front-end Workflow
addyosmani
1351
200k
We Have a Design System, Now What?
morganepeng
35
3k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
4 Signs Your Business is Dying
shpigford
169
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
11k
What's in a price? How to price your products and services
michaelherold
229
9.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
GitHub's CSS Performance
jonrohan
1020
420k
Transcript
Style GuideͱstylelintΛͬͯ HTML/CSSΛ៉ྷʹॻ͜͏ʂʂ 2020/01/31 WebφΠτٶ࡚ vol.8 େ௩ਅݴ
LTͷରऀ • ΤϯδχΞͷҰาͱͯ͠HTML/CSSษڧத • όοΫΤϯυΤϯδχΞͰยखؒͰϚʔΫΞο ϓॻ͍͍ͯΔ • ٯʹΰϦΰϦͷϑϩϯτΤϯυΤϯδχΞʹ Γͳ͍͔Ͱ͢ɻɻɻ
ࣗݾհ -BSBWFM 7VFKT 'JSFCBTF αφେ͖ͳ8FCΤϯδχΞ"
ձࣾհʢ֓ཁʣ ߹ಉձࣾϊϚυϦ ۀظ ϝϯόʔ໊ 8FCܥडୗ։ൃ ϑϧϦϞʔτ
ձࣾհʢࣄʣ • Vue.jsͷಋೖࢧԉɾઃܭ࣮ϨϏϡʔ • ҩྍܥWebαʔϏεͷUI/UXվળʢLaravelʣ • ҩྍܥΞϓϦͷ৽نडୗ։ൃʢCordova+Vue.js+Firebaseʣ • JAMstackϕʔεͷ੩తαΠτߏங ʢNuxt.js+Netlify+contentfulʣ
Έͳ͞Μ HTML/CSSΛ៉ྷʹ ॻ͚͍ͯ·͔͢ʁ
ͦ͏ʂ
HTML/CSS ࠷ॳʹগ͠ษڧͯ͠Ҏ߱ ͕ͬͭΓษڧ͢Δ͜ͱ ͕গͳ͍
ࠓͷൃදͰ ͳΜͱͳ͘ͰHTML/CSSΛ ॻ͍͍ͯΔͻͱ͕ ࣗ৴Λ࣋ͬͯॻ͚Δ
None
None
͋ͳͨ Ͳ͏ϨϏϡʔ͢Δʁ
Google HTML/CSS Style Guide
Google HTML/CSS Style Guide • Google͕ఏڙ͢ΔίʔσΟϯάΨΠυ • https://google.github.io/styleguide/ • Java,
Shell, JavaScript, HTML/CSSͳͲଟ • ΠϯσϯτҾ༻ූɺCSSϓϩύςΟͷฒͼ ॱͳͲͷϧʔϧ͕·ͱ·͍ͬͯΔ
HTML
Πϯσϯτۭനݸͱ͢Δ λϒͰͷΠϯσϯτېࢭͱ͢Δ Ϧετཁૉվߦ͢Δ͜ͱ ϧʔϧ
None
CSS
)5.-$44ͷશͯͷίʔυجຊతʹখจࣈΛ͏͜ͱ ՄೳͳݶΓলུܗͷϓϩύςΟΛ͏͜ͱ ͕ͷ߹୯ҐΛলུ͢Δ ΧϥʔίʔυՄೳͳݶΓจࣈͷਐදهΛ༻͢Δ ϧʔϧ
None
HTMLʹൺͯ CSSͷํ͕ϧʔϧ͕ଟ͍
ϧʔϧ͕ଟ͍ͱ νΣοΫ͢Δͷ͕େม
ͦ͜Ͱ CSSͷ੩తղੳπʔϧ StylelintΛ͓͏
Stylelint • CSSʹಛԽͨ͠ίʔυνΣοΫπʔϧ • 170΄Ͳͷϧʔϧ͕͋ΓɺϧʔϧҧͷίʔυΛ νΣοΫͯ͘͠ΕΔ • ͞ΒʹɺGoogle HTML/CSS Style
Guide ʹ४ڌ ͨ͠ϧʔϧηοτ stylelint-config-standard ͕͋ Δ
·ͱΊ • ίʔσΟϯάΨΠυΛऔΓೖΕͯɺHTML/ CSSΛهड़͢ΔϧʔϧΛ࡞Ζ͏ • ͞ΒʹɺStylelint Λಋೖͯ͠ίʔυ࣭Λ ্ͤ͞Α͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
None