More Related Content
Similar to 2016年版 フロントエンド開発フォーマット (20)
2016年版 フロントエンド開発フォーマット
- 15. 日本語でのコミット例
【動詞】ページ名 / 説明の形にする
15
$ git commit -m "【Fix】about / フッターリンクを修正" -m "(空白)" -m "リンク先をAからBに修
正"
(例) aboutページのfooterのリンクを修正
(例) contactページの住所の欄を追加
$ git commit -m "【Add】contact / 住所の欄を追加" -m "(空白)" -m "データーベースに合わせて
住所を入力する欄を追加する"
- 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:が省略されてい
る
- 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内ではダブル("")にす
る
- 43. (例)
43
/* NG クラス名だけだと把握できない */
.table01 {}
/* NG: 見た目を表してる */
.btn-green {}
/* OK */
.btn-primary {}
/* OK: 役割を表してる */
.gallery {}
.login {}
.video {}
何を示しているのかがわかる
命名を意識する
- 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;
}
半角スペースを一つ空ける
- 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つ空けるようにする
- 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>
冗長にならないようにする
- 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;
}
- 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