Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう！

Ca1357a6e793898d30cec23068c3cb36?s=47 大塚真言
January 31, 2020
Programming
2
610

Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう！

Ca1357a6e793898d30cec23068c3cb36?s=128

大塚真言

January 31, 2020
Tweet

More Decks by 大塚真言

See All by 大塚真言
CI/CD実践入門！ GitHub ActionsでCI/CD環境を作ってみよう！
Ca1357a6e793898d30cec23068c3cb36?s=48 shingen29
0
24
CI/CD実践入門！ GitHub ActionsでCI/CD環境を作ってみよう！
Ca1357a6e793898d30cec23068c3cb36?s=48 shingen29
0
36
ユースケース駆動開発で自社プロダクトを作ってみた！
Ca1357a6e793898d30cec23068c3cb36?s=48 shingen29
1
1.6k
MDN Web Docsから学ぶ 公式ドキュメントを読むメリット
Ca1357a6e793898d30cec23068c3cb36?s=48 shingen29
0
460
PHP8をざっくり解説してみる
Ca1357a6e793898d30cec23068c3cb36?s=48 shingen29
0
140
最近のプロジェクトを振り返ってみる
Ca1357a6e793898d30cec23068c3cb36?s=48 shingen29
0
210
Stripe CLIを触ってみた！
Ca1357a6e793898d30cec23068c3cb36?s=48 shingen29
1
150
プロジェクト管理ツールとしてGitLabと向き合ってみる
Ca1357a6e793898d30cec23068c3cb36?s=48 shingen29
0
21
FirestoreのGeoPoint型を使いこなす
Ca1357a6e793898d30cec23068c3cb36?s=48 shingen29
1
310

Other Decks in Programming

See All in Programming
Power Automateドリブンのチームマネジメント
0cc2ebc5781bcb2cae5f9ab7efa40ff2?s=48 hanaseleb
0
200
Chart実装が楽になりました。
622c25352cca9db43a10c0f3d4f73b75?s=48 keisukeyamagishi
0
120
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
79fc33e55cacc42beef647541de24d58?s=48 yasuakiomokawa
2
500
実践エクストリームプログラミング / Extreme Programming in Practice
00cbada6669966805d91061d5a234d3b?s=48 enk
1
570
即、New Relic / New Relic NOW!
271fad8d53cd1f12f2b4b6d38e3d7bd3?s=48 uzulla
0
340
Jetpack Compose best practices 動画紹介 ＠GoogleI/O LT会
D46ece3c06abca01b4920592f80c0ba4?s=48 takakitojo
0
400
プロダクトのタイプ別 GraphQL クライアントの選び方
C8b80b3b6b5b26df6122c8113ca441ea?s=48 shozawa
0
5.7k
The strategies behind ddd – AdeoDevSummit 2022
Beb422437c1dfb5366f197919e41ac50?s=48 lilobase
PRO
5
260
Managing Error Messages with your Oracle Database REST APIs
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
0
160
チームでカレーを作ろう！アジャイルカレークッキング
D30220c903365b2170e791313296b2f9?s=48 akitotsukahara
0
890
GDG Seoul IO Extended 2022 - Android Compose
7589a5a8fec022e8af4e46525150a291?s=48 taehwandev
0
330
社用PCのdotfiles管理 / dotfiles-in-company
8c653f1257636312a8e88612ccb27718?s=48 yammerjp
0
140

Featured

See All Featured
Docker and Python
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.6k
Put a Button on it: Removing Barriers to Going Fast.
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2.3k
Adopting Sorbet at Scale
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
63
7.6k
Automating Front-end Workflow
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k
We Have a Design System, Now What?
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
35
3k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
100
5.9k
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
29
4.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
269
11k
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.4k
Build The Right Thing And Hit Your Dates
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
19
1.2k
GitHub's CSS Performance
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
420k

Transcript

  1. Style GuideͱstylelintΛ࢖ͬͯ HTML/CSSΛ៉ྷʹॻ͜͏ʂʂ 2020/01/31 WebφΠτٶ࡚ vol.8 େ௩ਅݴ

  2. LTͷର৅ऀ • ΤϯδχΞͷҰา໨ͱͯ͠HTML/CSSษڧத • όοΫΤϯυΤϯδχΞͰยखؒͰϚʔΫΞο ϓॻ͍͍ͯΔ • ٯʹΰϦΰϦͷϑϩϯτΤϯυΤϯδχΞʹ ͸෺଍Γͳ͍͔΋Ͱ͢ɻɻɻ

  3. ࣗݾ঺հ -BSBWFM 7VFKT 'JSFCBTF α΢φେ޷͖ͳ8FCΤϯδχΞ"

  4. ձࣾ঺հʢ֓ཁʣ ߹ಉձࣾϊϚυϦ ૑ۀظ໨ ϝϯόʔ໊ 8FCܥडୗ։ൃ ϑϧϦϞʔτ

  5. ձࣾ঺հʢ࢓ࣄʣ • Vue.jsͷಋೖࢧԉɾઃܭ࣮૷ϨϏϡʔ • ҩྍܥWebαʔϏεͷUI/UXվળʢLaravelʣ • ҩྍܥΞϓϦͷ৽نडୗ։ൃʢCordova+Vue.js+Firebaseʣ • JAMstackϕʔεͷ੩తαΠτߏங ʢNuxt.js+Netlify+contentfulʣ

  6. Έͳ͞Μ HTML/CSSΛ៉ྷʹ ॻ͚͍ͯ·͔͢ʁ

  7. ͦ͏ʂ

  8. HTML/CSS͸ ࠷ॳʹগ͠ษڧͯ͠Ҏ߱ ͕ͬͭΓษڧ͢Δ͜ͱ ͕গͳ͍

  9. ࠓ೔ͷൃදͰ ͳΜͱͳ͘ͰHTML/CSSΛ ॻ͍͍ͯΔͻͱ͕ ࣗ৴Λ࣋ͬͯॻ͚Δ

  10. None
  11. None

  12. ͋ͳͨ Ͳ͏ϨϏϡʔ͢Δʁ

  13. Google HTML/CSS Style Guide

  14. Google HTML/CSS Style Guide • Google͕ఏڙ͢ΔίʔσΟϯάΨΠυ • https://google.github.io/styleguide/ • Java,

    Shell, JavaScript, HTML/CSSͳͲଟ਺ • Πϯσϯτ΍Ҿ༻ූɺCSSϓϩύςΟͷฒͼ ॱͳͲͷϧʔϧ͕·ͱ·͍ͬͯΔ

  15. HTML

  16. Πϯσϯτ͸ۭനݸͱ͢Δ λϒͰͷΠϯσϯτ͸ېࢭͱ͢Δ Ϧετཁૉ͸վߦ͢Δ͜ͱ ϧʔϧ

  17. None

  18. CSS

  19. )5.-$44ͷશͯͷίʔυ͸جຊతʹখจࣈΛ࢖͏͜ͱ ՄೳͳݶΓলུܗͷϓϩύςΟΛ࢖͏͜ͱ ஋͕ͷ৔߹͸୯ҐΛলུ͢Δ Χϥʔίʔυ͸ՄೳͳݶΓจࣈͷਐදهΛ࢖༻͢Δ ϧʔϧ

  20. None

  21. HTMLʹൺ΂ͯ CSSͷํ͕ϧʔϧ͕ଟ͍

  22. ϧʔϧ͕ଟ͍ͱ νΣοΫ͢Δͷ͕େม

  23. ͦ͜Ͱ CSSͷ੩తղੳπʔϧ StylelintΛ࢖͓͏

  24. Stylelint • CSSʹಛԽͨ͠ίʔυνΣοΫπʔϧ • 170΄Ͳͷϧʔϧ͕͋Γɺϧʔϧҧ൓ͷίʔυΛ νΣοΫͯ͘͠ΕΔ • ͞ΒʹɺGoogle HTML/CSS Style

    Guide ʹ४ڌ ͨ͠ϧʔϧηοτ stylelint-config-standard ͕͋ Δ

  25. ·ͱΊ • ίʔσΟϯάΨΠυΛऔΓೖΕͯɺHTML/ CSSΛهड़͢ΔϧʔϧΛ࡞Ζ͏ • ͞ΒʹɺStylelint Λಋೖͯ͠ίʔυ඼࣭Λ޲ ্ͤ͞Α͏

  26. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

  27. None