コーディングガイド

CSS設計はFLOCSSを使用

https://github.com/hiloki/flocss

BEMルールで記述

block__element--modifier
block--modifier

下層ページコーディング時のclass命名ルール

原則的にページタイトルをclassに入れていく
.p-pagename

block
.p-pagename-heading　(コンテンツ上部の導入部分など)
.p-pagename-visual
.p-pagename-news

element
.p-pagename-heading__inner　（display flexでブロックを並べる際などコンテンツを内包する要素）
.p-pagename-visual__list　（同じ要素を並べていく際の大枠）
.p-pagename-news__item　（並べた要素のひとつ）

コンテンツにボリュームがない場合は下記もOK
.p-pagename__inner　
.p-pagename__list　
.p-pagename__item　

modifier
.p-pagename-heading__inner–980
.p-pagename-visual__list–blue
.p-pagename-news__item–1

<div class="c-inner c-section">
	<section class="p-about-heading">
		<h2 class="c-heading-main">メインタイトル</h2>
                <p>リード文リード文リード文リード文リード文リード文リード文リード文</p>
	</section>

	<section class="p-about-access">
		<h2 class="c-heading-main">アクセス</h2>
		<div class="p-about-access__inner">
			<div class="p-about-access__content">
				<h3 class="c-heading-color">最寄駅</h3>
				<ul class="p-about-access__list">
					<li class="p-about-access__item">●●線XX駅より徒歩5分</li>
					<li class="p-about-access__item">●●線XX駅より徒歩15分</li>
				</ul>
			</div>
			<div class="p-about-access__map">
				<iframe>googlemap</iframe>
			</div>
		</div>

elementはひとつ

参考サイト

//NG
.p-about__list__item
.p-about__inner__box

//OK
.p-about__list
.p-about__item
.p-about__list-item（これは名前をハイフンで区切っているだけなのでOK）

c- クラス同士、p- クラス同士のカスケードは禁止

ただし同一のblock名同士で modifier や is-xxx の配下で変化をさせる要素の場合はOKとする
例　カラムやグリッドモジュール

//NG
.c-inner .c-heading-main {...}
.p-about .p-form-table{...}
.p-about .p-about-visual {...} //カスケードにする必要なし

//例外でOK
.p-design-visual__item--1 .p-design-visual__item {...}

p- クラスで c- クラスに変更を加える場合はマルチクラスを使用し、p- クラスの方で調整

projectフォルダ内のSCSSでは.c-から始まるclassの記述は避けてください。

//ページごとに修正したい.c-xxxがある場合は、下記の様に記述し、p-design-heading__ttlで調整する
あまりにも調節しないと使えなさそうな場合（例えばc-colを使って7：3のレイアウトにしようと考えた時など）はc-を使わずにp-でオリジナルで作成してください。
その際はp-col-ではなく上記の命名規則に従ってください。

<h2 class="p-about-heading__ttl c-heading-main">総合デザイン科</h2>
<div class="p-about-heading__inner">
	<div class="p-about-heading__content">
      	      	７割コンテンツ
      	</div>
	<div class="p-about-heading__img">
		3割コンテンツ
	</div>

HTML要素を限定するようなクラス名は禁止

特に c- クラスでは禁止します。
理由：異なるHTML要素に同一のスタイルを適用する可能性があるため

//NG
.p-xxxx__h2
.p-xxxx-dl
.p-xxxx-xxx__ul

//OK
.p-xxxx__ttl
.p-xxxx-info
.p-xxxx-xxx__list
.p-xxx-table //tableは表の意味があるのでOK 

IDの使用について

IDの仕様は禁止します。
理由：詳細度をあげないため。またヘッダーやフッターなどには接頭辞「l-」を使用しているため不要。

例外

• JavaScriptで使用するためのID指定。（例）id=”js-slider”
• ページアンカーリンク id=”anchor-xxx”