私のコーディング規約

どのタグを使うか、どこにクラスをつけるか、クラス名をどうするか、CSSをどこに書くか、、、

コーディングをしている中で、一番無駄だと感じるのが「迷う時間」です。
規約をしっかり決めて、迷う時間を最小化しましょう。

以下のサイトの内容をベースに、自分なりにアレンジしたものをまとめました。
[吉本式BEM設計（BEM設計ベース）](http://tsudoi.org/guide/)

##HTML
###クラス付けの基準
クラスをつけないタグ、つけるタグをあらかじめ決めておきます。
####クラスをつけないタグ
- インラインレベルの要素（`a, span, img, em, strong, label, input...`）
- 親要素がほぼ固定の要素（`li, thead, tbody, tr, th, td, dt, dd`）

####クラスをつけるタグ
その他全ての要素。
`header, footer, main, section, article, aside, nav, div, h1~h6, p, figure, table, dl, ul, ol, ,iframe, form...`
クラスをつけるか迷う時間をなくすために、スタイルを当てる必要がなくても必ずクラスをつけるルールにします。

またボタンなどあらゆる箇所で利用するパーツがある場合には、1つの要素に複数のクラスを指定します。

####Blockにするタグ
以下のタグ(div以外)は必ずBlockとして扱います。
`header, footer, main, article, section, aside, div(elementでも使う)`

####Elementにするタグ
上記以外全てのタグは、必ずElementとして扱います。
`h, p, span, img, a, ul, ol, li, dl, dt, dd, figure, div(blockでも使う)`

###クラス名
`Block`または`Block__Element`の方式が基本です。
Modifierは、同じブロック内に複数の同一タグがあった場合に使用し、`_name`など`_`から始まる別のクラスを付与する形にします。
####Block
#####共通エリア
よく使うエリアは以下のように決め打ちで。そのサイト特有のエリアは頑張って考えましょう。

```html
<header class="header"> <!-- サイトヘッダー -->
<footer class="footer"> <!-- サイトフッター -->
<nav class="gnav"> <!-- グローバルナビ -->
<main class="main"> <!-- メインコンテンツ -->
<nav class="fnav"> <!-- フッターナビ -->
<nav class="share"> <!-- シェアナビ -->
<nav class="paging"> <!-- ページング -->
<section class="sec"> <!-- セクション -->
```

#####ページ固有のエリア
`ページを表す3文字 + その箇所を表す3文字`
例）topctt
→ページごとにSassファイルを分割するので、その箇所を表す3文字は適当で良いです。


####Element
#####`div`,`p`以外
element名は常に固定。かぶった場合はmodifierを使う。

```html
<h1〜h6 class="block__ttl">
<table class="block__table">
<ul class="block__list">
<ol class="block__list">
<dl class="block__def">
<form class="block__form">
<input class="block__input">
<label class="block__label">
```

#####`p`
以下のいずれかを使う。

```html
<p class="block__txt"> <!-- テキスト系 -->
<p class="block__ttl"> <!-- タイトル系 -->
<p class="block__btn"> <!-- ボタン系 -->
<p class="block__logo"> <!-- ロゴ系 -->
<p class="block__data"> <!-- input系 -->
```

#####`div`
以下が使いやすいが、他でも良い。

````html
<div class="block__inner">
<div class="block__outer">
<div class="block__wrap">
<div class="block__box">
````
###その他
blockの前後に1行空ける。

##Sass
Sassのディレクトリ構成は以下の通りです。

```
- scss
  └── style.scss
  └── bases
      └── _reset.scss
      └── _config.scss
      └── _base.scss
      └── _mixin.scss
  └── utilities
      └── _btn.scss
      └── _title.scss
      └── _form.scss
      └── _responsive.scss
  └── layouts
      └── _header.scss
      └── _gnav.scss
      └── _content.scss
      └── _fnav.scss
      └── _footer.scss
  └── pages
      └── _top.scss
      └── _abt.scss
      └── _ctt.scss
  └── pulgins
      └── _swiper.scss
```

###basesディレクトリ
- **_reset.scss**：ブラウザのデフォルトのスタイルを解除します。
- **_base.scss**：ベースとなるスタイルを、セレクタに直接指定します。（`a{text-decoration: none;}`など）
- **_config.scss**：色、ブレイクポイント、フォント、画像パスなどを設定します。
- **_mixin.scss**：メディアクエリなど、`@include`して使うものを格納します。

###utilitiesディレクトリ
ボタン、タイトル、フォームなど、繰り返し使うパーツのスタイルを格納します。
`_responsive.scss`には、レスポンシブ対応のために`display`の値を切り替えるクラスなどを格納します。

###layoutsディレクトリ
ヘッダーやフッターなど、複数のページで繰り返し使用するエリアのスタイルを格納します。
エリアごとに1つのファイルを作ります。

###pagesディレクトリ
ページごとに1つのファイルを作り、ページ固有のスタイルを格納します。
ファイル名は`_<ページを表す3文字>.scss`に固定します。
例）_top.scss

###pluginsディレクトリ
画像スライダーなど、プラグイン固有のデザインを格納します。

##設計のメリット
**クラス名が衝突する危険性が低い**
→各ページ固有のスタイルを格納するファイルを分割し、ブロック名を`ファイル名 + 3文字`に固定することでblock名の衝突に気がつくことができます。

**クラス名を考えるのが楽**
→block名を決め打ちor`ファイル名 + 3文字`に固定。element名を固定。ファイルを分割したのでクラス自体にあまり意味がなくても良い。この3つによりクラス名に迷わなくなる。

**クラスをつける基準が明確**
→クラスをつけるタグ、つけないタグをあらかじめ決めておくことで、コーディングスピードのアップに繋がります。

**コーディングに統一感が生まれる**
→クラス名やクラスの付け方に一体感があること自体が1つの価値だと思います。

##設計のデメリット
**HTMLの記述量が増える**
→スタイルが必要無い要素にもクラスをつけ、さらに同じスタイルを使い回す場合にはマルチクラスになるので、クラスの量がかなり多くなります。