8. プリプロセッサーについて

本ドキュメントでは、Pug、Sassといった制作時に利用するプリプロセッサーについての詳細な規約は規定しない。

ただし、バッドプラクティスについて規定するため、それぞれ遵守すること。

8.1 Sass

8.1.1 @extend を極力利用しない

出力されるCSSコードが連結され、そのままでは修正ができないレベルの破壊的コンパイルを行うため可能な限り利用せずに mixin 等を利用すること。

8.1.2 1ファイルに対して2つ以上のコンポーネントを記述しない

FLOCSSに準じて行うため、1つのファイルに対して2つ以上のコンポーネントを記述しない。

8.1.3 状態を2つまでに制限する

FLOCSSではコンポーネントに対して is- 接頭詞を利用することで状態を付与できるが、状態の重ね掛けによって成立するコンポーネントは可読性・再利用制が低いため2つ以上の状態によって成立するような記述は行わない。

8.1.4 同一コンポーネント内でのエレメント名の重複を避ける

同一コンポーネントにてエレメントをが2階層以上になる場合、階層が違う場合でも同一エレメント名は避けること。

/** Bad : title が重複 **/
.c-block {
	&__title {
        
	}
    &__item {
    	&__title { 
    	}
    }
} 

8.1.5 1ファイルにおける行数が150行以上にならないように調整すること

1ファイルに対してのスタイル定義が多くなればなる程可読性は落ちるため、150行を目処にコンポーネントの分離等を視野に入れること。

9 Pug について

Pug（パグ）は、HTMLを効率的に書くためのテンプレートエンジンである。

オフィシャルサイト

参考文献

https://www.tam-tam.co.jp/tipsnote/html_css/post12789.html https://blog.mismithportfolio.com/web/20160326pugbegin

基本的には grow-template では Pug を利用してHTMLコーディングを行う。

8.2 拡張子の統一

Pug テンプレートのファイル名拡張子は .pug で統一する

8.2.1 同一マークアップ箇所のmixin化を図る

テンプレートごとに共通コンポーネントを直接記述せずに mixin 等にて共通化を図る。 また、引数等にてできるだけマークアップを一箇所に固定できるように善処する。

8.2.2 多重属性の禁止

タグ、mixin に対して多重属性を付与することを禁止する。

//- Bad
a(href="/test/")(class="c-block") 

//- Good
a(href="/test/",class="c-block") 

8.2.3 出力コメントを利用しない

コメントについては意図しない出力となる可能性が高いため、 HTMLとして出力しないコメント記法を利用する。

// HTMLとして出力される
//- HTMLとして出力されない