/*
===
0.1 Coding Rules
===

### Coding Rules

Frontwork CSSにはいくつかのコーディングルールがあり、そのルールを遵守することを推奨します。

#### Categorize

[SMACSS](https://smacss.com/)を応用し、機能や振る舞いに応じたカテゴライズを行なっています。
それぞれのカテゴリーを組み合わせてスタイル設計を行います。
Frontwork CSSはApplicationカテゴリー以外を生成するため、Applicationカテゴリーの開発に注力することができます。

##### Foundation Category

ユーザーエージェントごとのスタイルのリセットや初期化、各要素の基礎的なスタイルを定義しています。

##### Helper Category

Text Alignなど、小規模な振る舞いを追加するための補助的な役割を持つスタイルを定義しています。
Applicationカテゴリーのスタイル指定の肥大化を防ぐ目的で利用します。
クラス名は、`h-`プレフィックスに続いて、振る舞い示す2文字の略称から成ります。

##### Layout Category

ページ全体のレイアウトを構築するためのスタイルを定義しています。
クラス名は、`l-`プレフィックスに続いて、レイアウトの種別を示す2文字の略称とElementとModifierから成ります。
またModifierの`@`の文字の後に続く数字は、[Media Query Mixin](#link-3)昇順の`$query`変数の値で、ブレイクポイントごとに振る舞いが変化することを示しています。

##### JavaScript Category

JavaScriptの制御に利用するスタイルを定義しています。
クラス名には、`js-`プレフィックスを付与します。

##### State Category

要素の状態を示すスタイルを定義しています。
クラス名は、`is-current`、`is-active`、`is-disable`のように`is-`プレフィックスの後に状態を示す単語が続きます。
単独でスタイルを設定するのではなく、必ず他のカテゴリーと合わせて利用します。

##### Application Category

プロジェクト固有のスタイルを定義します。

ApplicationカテゴリーはさらにThemeとComponentsの2つに分けられます。

###### Components

汎用性が高く、再利用しやすいスタイルを定義します。
例えば、ボタンやメディアパターン、ユーザーの入力を想定したスタイルが該当します。
このスタイルはスタイルガイドに追記することが望ましいです。

###### Theme

Components以外のスタイルを定義します。
例えばヘッダーやフッターのようなページで唯一の存在となる要素や、汎用性の低い要素が該当します。

#### Naming Convention

クラス名の命名規則に、[BEM](https://bem.info/)を採用しています。

詳細な命名規則は次の通りです。
すべての単語は小文字を使用し、大文字は使用せず、単語の連結には`-`を用います。
比較的よく使う単語は略称を使用しても構いません。

```html
<div class="media-background">
  <div class="media media--middle">
    <div class="media__head">
      <h1 class="media__title">Title</h1>
    </div>
    <p class="media__body">Body</p>
  </div>
</div>
```

```scss
.media {
  // Block
}
.media__head,
.media__body,
.media__title {
  // Element
}
.media--middle {
  // Modifier
}
.media-background {
  // Other Block
}
```

#### Style Design

[Philip Walton](https://philipwalton.com/articles/css-architecture/)氏が述べている次の原則を意識したスタイル設計を行います。

* 予測しやすい

* 再利用しやすい

* 保守しやすい

* 拡張しやすい

具体的には次のルールに従います。

##### Element Selector

要素セレクターの利用を最小限にし、HTML構造の依存を低減します。

##### Absolute Value

絶対値の利用を最小限にします。

##### Important Declaration

`!important`宣言を最小限にします。

##### Nest

セレクターのネストは最小限にし、HTML構造の依存を低減します。

```html
<div class="media">
  <div class="media__head">
    Head
  </div>
</div>
```

```scss
.media .media__head {
  // Bad
}

.media__head {
  // Good
}
```

あまりにもModifierが増えたり、再利用性がない場合には、MixesパターンやApplicationカテゴリーのThemeを追加するなどして、ネストを深くしても構いません。

```html
<form class="form">
  <button class="button">Button</button>
</form>
```

###### Mixes Pattern

```scss
.form .button {
  // Mixes Pattern
}
```

###### Application Theme

```html
<form class="form">
  <div class="form-left">
    <button class="button">Button</button>
  </div>
</form>
```

```scss
.form-left .button {
  // Application Theme
}
```

##### Common

同様のコードはなるべく共通化します。

```scss
// Bad
.sample-a {
  font-size: 16px;
  color: red;
}

.sample-b {
  font-size: 16px;
  color: green;
}

// Good
.sample-a,
.sample-b {
  font-size: 16px;
}

.sample-a {
  color: red;
}

.sample-b {
  color: green;
}
```

##### Cascading

定義したスタイルの上書きを極力なくします。

###### Bad

```html
<p class="text no-border">Title</p>
```

```scss
.text {
  font-size: 18px;
  border: 1px solid black;
}

.no-border {
  border: 0;
}
```

###### Good

```html
<p class="text border">Title</p>
```

```scss
.text {
  font-size: 18px;
}

.border {
  border: 1px solid black;
}
```

*/

@import 'core/media-query';
@import 'core/cubic-bezier';