🌟
Sass * FROCSSによるサイトコーディングのベストプラクティス
結論
プロジェクトの規模や求める保守性・更新の頻度などに応じてコーディングルールを設計することで、そのプロジェクトに応じた最適な開発につながる。
FROCSSではすべてのタグにクラスを割り当てることが求められるが、工数の肥大化や小規模プロジェクトにおける過度なルール化は保守性が損なわれる可能性もある。
例）
about.html
<section id ="about" class ="p-about">
<h2 class="p-about--title">
<img src="about.png" alt="" class="p-about--img">
<div class="p-about__content">
<ul class="p-about__content__list">
<li class="p-about__content__list__item">
<h3 class="p-about__content__list__item--title">
タイトル
</h3>
<p class="p-about__content__list__item---desc">
テキストテキストテキストテキストテキスト
</p>
</li>
<li class="p-about__content__list__item">
<h3 class="p-about__content__list__item--title">
タイトル
</h3>
<p class="p-about__content__list__item---desc">
テキストテキストテキストテキストテキスト
</p>
</li>
<li class="p-about__content__list__item">
<h3 class="p-about__content__list__item--title">
タイトル
</h3>
<p class="p-about__content__list__item---desc">
テキストテキストテキストテキストテキスト
</p>
</li>
</ul>
<p class="p-about__content--text">
テキストテキストテキストテキストテキスト
</p>
</div>
</section>
長すぎ！！見づらい！！！
ということで↓
about.html
<section id ="about" class ="p-about">
<h2>セクションタイトル</h2>
<img src="about.png" alt="">
<div class="p-about__content">
<ul>
<li>
<h3>タイトル</h3>
<p>テキストテキストテキストテキストテキスト</p>
</li>
<li>
<h3>タイトル</h3>
<p>テキストテキストテキストテキストテキスト</p>
</li>
<li>
<h3>タイトル</h3>
<p>テキストテキストテキストテキストテキスト</p>
</li>
</ul>
<p class="p-about__content--text">
テキストテキストテキストテキストテキスト
</p>
</div>
</section>
Discussion