Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (13)
Ähnlich wie 2016年版 フロントエンド開発フォーマット
Ähnlich wie 2016年版 フロントエンド開発フォーマット (20)
2016年版 フロントエンド開発フォーマット
- 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
- 8. 準備すべき環境 • Node.js(v5.4.1) • Git • Gulp(4.x) • Sass • Jade • EditorCoding 8
- 9. 使用方法 9 1. ファイルを作業フォルダに落とす $git clone https://github.com/KodairaKenya/web-starter-kit.git 2. パッケージをインストール $npm install 3. 実行 $gulp
- 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 "データーベースに合わせて 住所を入力する欄を追加する"
- 20. (例) 20 /* NG */ <div> <ul> <li><a href="/">Moe</a></li> <li>Larry <li>Curly </ul> </div スペースは2つ
- 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:が省略されてい る
- 27. 構造の分離 プレゼンテーション（スタイル）と 振る舞い（スクリプト）は、 ストラクチャ（マークアップ）から分離する 27 理由 メンテナンス性の向上 ファイルが分割し依存しないことで安易に修正が行える
- 28. (例) 28 <!-- NG --> <h1 style="font-size: 1em;">HTML sucks</h1> <!-- OK --> <link rel="stylesheet" href="default.css"> <h1>My first CSS-only redesign</h1> 外部ファイルから スタイルを当てている
- 30. (例) 30 <!-- NG --> The currency symbol for the Euro is “&eur;”. <!-- OK --> The currency symbol for the Euro is “€”. なるべく文字参照 はNG
- 32. (例) 32 <!-- NG --> <img src="spreadsheet.png"> <!-- OK --> <img src="spreadsheet.png" alt="Spreadsheet screenshot."> alt属性の入力は ユーザーへの気遣い
- 34. (例) 34 <!-- NG --> <link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css"> <!--OK --> <link rel="stylesheet" href="//www.google.com/css/maia.css"> type属性は必要な い
- 37. (例) 37 <!-- NG --> <a class='maia-button maia-button-secondary'>Sign in</a> <!-- OK --> <a class="maia-button maia-button-secondary">Sign in</a> HTML内ではダブル("")にす る
- 39. CSS(基本の書式ルール) 39
- 43. (例) 43 /* NG クラス名だけだと把握できない */ .table01 {} /* NG: 見た目を表してる */ .btn-green {} /* OK */ .btn-primary {} /* OK: 役割を表してる */ .gallery {} .login {} .video {} 何を示しているのかがわかる 命名を意識する
- 45. (例) 45 /* NG */ #navigation {} .atr {} /* OK */ #nav {} .author {} ※.atrだと省略しすぎ
- 48. (例) 48 /* NG */ ul.example {} div.error {} /* OK */ .example {} .error {} 要素に依存しないように する
- 50. (例) 50 /* NG */ padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; /* OK */ padding: 0 1em 2em; ショートハンドプロパテ ィで記述量を減らす
- 52. (例) 52 /* NG */ margin: 0px; padding: 0px; /* OK */ margin: 0; padding: 0;
- 54. (例) 54 /* NG */ font-size: 0.8em; /* OK */ font-size: .8em; .数字にして記述量を減 らす
- 56. (例) 56 /* NG */ background-image: url("//www.google.com/css/.css"); /* OK */ background-image: url(//www.google.com/css/.css); ("")を省略する
- 58. (例) 58 /* NG */ color: #ffffff; /* OK */ color: #fff;
- 60. (例) 60 @media screen { html { background: #fff; color: #444; } } インデントは半角スペース2 つ
- 62. (例) 62 /* NG */ .test { display: block; height: 100px } /* OK */ .test { display: block; height: 100px; } プロパティの終端には 必ずセミコロン(;)を書くようにす る
- 64. (例) 64 /* NG */ h3 { font-weight:bold; } /* OK */ h3 { font-weight: bold; } 半角スペースを一つ空ける
- 66. (例) 66 /* NG */ .sample { color: #399; } /* NG */ .sample{ color: #399; } /* OK */ .sample { color: #399; } 記述方法を統一する
- 68. (例) 68 /* NG */ h1, h2, h3 { font-weight: normal; line-height: 1.2; } /* OK */ h1, h2, h3 { font-weight: normal; line-height: 1.2; }
- 70. (例) 70 /* NG */ html { background: #fff; } body { margin: auto; } /* OK */ html { background: #fff; } body { margin: auto; } 改行を1つ空けるようにする
- 72. BEMのセパレーター 72 理由 こちらの方が普及してるため 本来のBEMよりもセパレータが識別しやすいため MindBEMdingを採用する block__element--modifier
- 74. (例) 74 /* NG */ <ul class="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> 冗長にならないようにする
- 76. (例) 76 /* NG */ .c-ghost-btn--primary /* OK */ .c-ghostBtn--primay ghostBtnがキャメルケースで 記述されている
- 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; }
- 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; }
- 83. (例) 83 /* NG */ <div class="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; }
- 93. ディレクトリ 93 共通で使い回す画像 → imgディレクトリ直下 ページ固有の画像 → ページ名でフォルダを作成
- 96. 種類を6つに分類 96 bg : 背景 btn : ボタン icon : アイコン txt : テキスト ttl : タイトル img : 画像
- 100. (例) 100 // NG <img src="../img/test.png"> <img src="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 • 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 多くの方々の知恵を参考とさせていただきました 心より感謝いたします
- 104. • 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