Downloaded 76 times
![参考文献
103
• メンテナブルCSS
https://www.cyberagent.co.jp/techinfo/techreport/report/id=7926
• Harry Roberts氏によるCSSガイドライン
https://github.com/kiwanami/CSS-Guidelines
• 「Google HTML/CSS Style Guide」を適当に和訳してみた」
http://re-dzine.net/2012/05/google-htmlcss-style-guide/
• HTML5日本語訳
http://momdo.github.io/html5/Overview.html
• 新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]
http://html-coding.co.jp/knowhow/tips/naming-rule/
• Jade
https://gist.github.com/japboy/5402844
• こんなHTMLとCSSのコーディング規約で書きたい
http://qiita.com/pugiemonn/items/964203782e1fcb3d02c3
多くの方々の知恵を参考とさせていただきました
心より感謝いたします](https://image.slidesharecdn.com/random-160324052803/75/2016-103-2048.jpg)
![• Code smells in CSS
http://article.enja.io/articles/code-smells-in-css.html
• CSS設計の基礎を見直す
http://gihyo.jp/dev/serial/01/js-foundation/0009
• 100年後も崩れないCSS勉強会 第1回「詳細度」
http://pepabo.github.io/css/specificity/
• 100年後も崩れないCSS勉強会 第2回「コンポーネント」
http://pepabo.github.io/css/component/
• [CSS] Object Oriented CSSを学んで綺麗なコードを書く
http://www.yoheim.net/blog.php?q=20141201
• SMACSS 読んだ
http://chroma.hatenablog.com/entry/2013/07/22/120818
• BEMとは何か？
https://github.com/juno/bem-methodology-ja/blob/master/definitions.md
• 使いやすいWordPressのためのCSSのつくりかた
http://www.slideshare.net/Toro_Unit/wordpresscss
104](https://image.slidesharecdn.com/random-160324052803/75/2016-104-2048.jpg)
2016年版 フロントエンド開発フォーマット
- 1.
- 2.
- 3. 対象 • プロジェクトに関わる人全般 • HTML/ CSSの知識があることを前提とする • 静的なページのみのコーディングを想定とする 3
- 4. 使用ツール(事前知識) • CSS Preprocessor:Sass（scss記法） • Reset CSS: sanitize.css • HTML Template Engind: Jade • TaskRunner: Gulp • VersionControlSystem: Git 4
- 5. 得られる恩恵 1. コードの品質の安定 慣例・定石の例をまとめることで品質(拡張性, メンテナンス性,可読性, バ グの回避)を担保する 2. コミュニケーションコストの削減 ルールに沿った書き方をする事で連絡や質問事項を減らす 3. 経験値の共有 HTML/CSSの仕様上起きやすいミスを防ぐ 5
- 6.
- 7.
- 8. 準備すべき環境 • Node.js(v5.4.1) • Git •Gulp(4.x) • Sass • Jade • EditorCoding 8
- 9. 使用方法 9 1. ファイルを作業フォルダに落とす $git clonehttps://github.com/KodairaKenya/web-starter-kit.git 2. パッケージをインストール $npm install 3. 実行 $gulp
- 10.
- 11.
- 12.
- 13. 原則 • 1行目に全体的説明(タイトル)を50 字以内で記述 •2行目は空白行 • 3行目以降に変更内容の詳細(何をなぜ)を記述 13 コミットメッセージの原則的なルール
- 14. 1行目の記述フォーマット • 【Fix】 ：バグ修正 •【Add】 ：新規機能（ファイル）追加 • 【Change】 ：仕様変更 • 【Remove】：削除（ファイル） 14
- 15. 日本語でのコミット例 【動詞】ページ名 / 説明の形にする 15 $git commit -m "【Fix】about / フッターリンクを修正" -m "(空白)" -m "リンク先をAからBに修 正" (例) aboutページのfooterのリンクを修正 (例) contactページの住所の欄を追加 $ git commit -m "【Add】contact / 住所の欄を追加" -m "(空白)" -m "データーベースに合わせて 住所を入力する欄を追加する"
- 16.
- 17.
- 18.
- 19.
- 20. (例) 20 /* NG */ <div> <ul> <li><ahref="/">Moe</a></li> <li>Larry <li>Curly </ul> </div スペースは2つ
- 21.
- 22. (例) 22 /* NG */ div{ background: url(http://www.google.com/images/example); } /* OK */ div { background: url(//www.google.com/images/example); } <!-- NG --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- OK --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> http:が省略されてい る
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. (例) 28 <!-- NG --> <h1style="font-size: 1em;">HTML sucks</h1> <!-- OK --> <link rel="stylesheet" href="default.css"> <h1>My first CSS-only redesign</h1> 外部ファイルから スタイルを当てている
- 29.
- 30. (例) 30 <!-- NG --> Thecurrency symbol for the Euro is “&eur;”. <!-- OK --> The currency symbol for the Euro is “€”. なるべく文字参照 はNG
- 31.
- 32. (例) 32 <!-- NG --> <imgsrc="spreadsheet.png"> <!-- OK --> <img src="spreadsheet.png" alt="Spreadsheet screenshot."> alt属性の入力は ユーザーへの気遣い
- 33.
- 34. (例) 34 <!-- NG --> <linkrel="stylesheet" href="//www.google.com/css/maia.css" type="text/css"> <!--OK --> <link rel="stylesheet" href="//www.google.com/css/maia.css"> type属性は必要な い
- 35.
- 36.
- 37. (例) 37 <!-- NG --> <aclass='maia-button maia-button-secondary'>Sign in</a> <!-- OK --> <a class="maia-button maia-button-secondary">Sign in</a> HTML内ではダブル("")にす る
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. (例) 43 /* NG クラス名だけだと把握できない*/ .table01 {} /* NG: 見た目を表してる */ .btn-green {} /* OK */ .btn-primary {} /* OK: 役割を表してる */ .gallery {} .login {} .video {} 何を示しているのかがわかる 命名を意識する
- 44.
- 45. (例) 45 /* NG */ #navigation{} .atr {} /* OK */ #nav {} .author {} ※.atrだと省略しすぎ
- 46.
- 47.
- 48. (例) 48 /* NG */ ul.example{} div.error {} /* OK */ .example {} .error {} 要素に依存しないように する
- 49.
- 50. (例) 50 /* NG */ padding-bottom:2em; padding-left: 1em; padding-right: 1em; padding-top: 0; /* OK */ padding: 0 1em 2em; ショートハンドプロパテ ィで記述量を減らす
- 51.
- 52. (例) 52 /* NG */ margin:0px; padding: 0px; /* OK */ margin: 0; padding: 0;
- 53.
- 54. (例) 54 /* NG */ font-size:0.8em; /* OK */ font-size: .8em; .数字にして記述量を減 らす
- 55.
- 56. (例) 56 /* NG */ background-image:url("//www.google.com/css/.css"); /* OK */ background-image: url(//www.google.com/css/.css); ("")を省略する
- 57.
- 58. (例) 58 /* NG */ color:#ffffff; /* OK */ color: #fff;
- 59.
- 60. (例) 60 @media screen { html{ background: #fff; color: #444; } } インデントは半角スペース2 つ
- 61.
- 62. (例) 62 /* NG */ .test{ display: block; height: 100px } /* OK */ .test { display: block; height: 100px; } プロパティの終端には 必ずセミコロン(;)を書くようにす る
- 63.
- 64. (例) 64 /* NG */ h3{ font-weight:bold; } /* OK */ h3 { font-weight: bold; } 半角スペースを一つ空ける
- 65.
- 66. (例) 66 /* NG */ .sample { color:#399; } /* NG */ .sample{ color: #399; } /* OK */ .sample { color: #399; } 記述方法を統一する
- 67.
- 68. (例) 68 /* NG */ h1,h2, h3 { font-weight: normal; line-height: 1.2; } /* OK */ h1, h2, h3 { font-weight: normal; line-height: 1.2; }
- 69.
- 70. (例) 70 /* NG */ html{ background: #fff; } body { margin: auto; } /* OK */ html { background: #fff; } body { margin: auto; } 改行を1つ空けるようにする
- 71.
- 72.
- 73.
- 74. (例) 74 /* NG */ <ulclass="navList"> <li class="navList__item"> <a class="navList__item__link" href=""></a> </li> </ul> /* OK */ <ul class="navList"> <li class="navList__item"> <a class="navList__link" href=""></a> </li> </ul> 冗長にならないようにする
- 75.
- 76. (例) 76 /* NG */ .c-ghost-btn--primary /*OK */ .c-ghostBtn--primay ghostBtnがキャメルケースで 記述されている
- 77.
- 78.
- 79. (例) 79 /* NG */ .headline{ font-size: 2rem; margin-bottom: 10px; border-bottom: 1px solid #333; } .no-border { border: none; } /* OK */ .headline { font-size: 2rem; margin-bottom: 10px; } .headline--border { border-bottom: 1px solid #333; }
- 80.
- 81. (例) 81 /* NG */ h1{ font-size: 2.4rem; line-height: 32px; } .siteTitle { font-size: 3.6rem; line-height: 48px; } /* OK */ h1 { font-size: 2.4rem; line-height: 1.333; } .siteTitle { font-size: 2.4rem; }
- 82.
- 83. (例) 83 /* NG */ <divclass="contents"> <div class="wrap"> <h2>Contents Title</h2> <p>Contents の本文が入ります。</p> </div> </div> .contents .wrap h2 { font-size: 2.4rem; } /* OK */ <div class="contents"> <div class="wrap"> <h2 class="headline">Contents Title</h2> <p>Contents の本文が入ります。</p> </div> </div> .headline { font-size: 2.4rem; }
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93. ディレクトリ 93 共通で使い回す画像 → imgディレクトリ直下 ページ固有の画像→ ページ名でフォルダを作成
- 94.
- 95.
- 96. 種類を6つに分類 96 bg : 背景 btn: ボタン icon : アイコン txt : テキスト ttl : タイトル img : 画像
- 97.
- 98.
- 99.
- 100. (例) 100 // NG <img src="../img/test.png"> <imgsrc="http://test.com/img/test.png"> // OK <img src="/img/test.png"> 相対パスのほうが記述量が 少ない
- 101.
- 102. まとめ(余談) 102 • ルールは作ることより、浸透させることのほうが難しい • それでも項目一つ一つの認識を明文化することが大事 •一貫したルールを守って作業を進めることは、将来的な 選択に多大な幸福をもたらしてくれる • READMEはプロジェクト毎に管理をして、柔軟にルール は変更するべきである
- 103. 参考文献 103 • メンテナブルCSS https://www.cyberagent.co.jp/techinfo/techreport/report/id=7926 • HarryRoberts氏によるCSSガイドライン https://github.com/kiwanami/CSS-Guidelines • 「Google HTML/CSS Style Guide」を適当に和訳してみた」 http://re-dzine.net/2012/05/google-htmlcss-style-guide/ • HTML5日本語訳 http://momdo.github.io/html5/Overview.html • 新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名] http://html-coding.co.jp/knowhow/tips/naming-rule/ • Jade https://gist.github.com/japboy/5402844 • こんなHTMLとCSSのコーディング規約で書きたい http://qiita.com/pugiemonn/items/964203782e1fcb3d02c3 多くの方々の知恵を参考とさせていただきました 心より感謝いたします
- 104. • Code smellsin CSS http://article.enja.io/articles/code-smells-in-css.html • CSS設計の基礎を見直す http://gihyo.jp/dev/serial/01/js-foundation/0009 • 100年後も崩れないCSS勉強会 第1回「詳細度」 http://pepabo.github.io/css/specificity/ • 100年後も崩れないCSS勉強会 第2回「コンポーネント」 http://pepabo.github.io/css/component/ • [CSS] Object Oriented CSSを学んで綺麗なコードを書く http://www.yoheim.net/blog.php?q=20141201 • SMACSS 読んだ http://chroma.hatenablog.com/entry/2013/07/22/120818 • BEMとは何か？ https://github.com/juno/bem-methodology-ja/blob/master/definitions.md • 使いやすいWordPressのためのCSSのつくりかた http://www.slideshare.net/Toro_Unit/wordpresscss 104