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
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
Search
大塚真言
January 31, 2020
Programming
2
710
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
大塚真言
January 31, 2020
Tweet
Share
More Decks by 大塚真言
See All by 大塚真言
自社プロダクトを作ってみた.pdf
shingen29
0
230
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
72
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
170
ユースケース駆動開発で自社プロダクトを作ってみた!
shingen29
1
5.1k
MDN Web Docsから学ぶ 公式ドキュメントを読むメリット
shingen29
0
700
PHP8をざっくり解説してみる
shingen29
0
250
最近のプロジェクトを振り返ってみる
shingen29
0
320
Stripe CLIを触ってみた!
shingen29
1
190
プロジェクト管理ツールとしてGitLabと向き合ってみる
shingen29
0
38
Other Decks in Programming
See All in Programming
Fast JSX: Don't clone props object #28768
yossydev
1
120
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
Code Reviews
bkuhlmann
4
890
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
810
Goのエラースタックトレースの歴史と今後
sonatard
9
1.5k
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Snowflakeで眠ったデータを起こそう!
estie
0
120
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
770
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
新宿ダンジョンを可視化してみた
satoshi7190
2
260
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
4 Signs Your Business is Dying
shpigford
175
21k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Navigating Team Friction
lara
178
13k
Agile that works and the tools we love
rasmusluckow
325
20k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Typedesign – Prime Four
hannesfritz
36
2.1k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Web development in the modern age
philhawksworth
202
10k
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