Appearance
メインコンテンツのエレメントとヘルパークラス
メインコンテンツ(content-mainコンポーネント)の内容はCMSなどで管理されるHTMLを含んだり、ページ独自のスタイルを扱うことが多いので例外的に専用のルールを設けます。
html
<div class="c-content-main">
<!-- ❗この部分がメインコンテンツ専用のルール -->
</div>エレメントのクラスの例外とクラス追加のルール
メインコンテンツのエレメントは基本的に自由です。ただし、クラス名はc-で開始しないでください。また、メインコンテンツの中にコンポーネントを内包してはいけません。
html
<div class="c-content-main">
<!-- ✅ 良い例 -->
<div class="foo">...</div>
<!-- ❌ 悪い例 -->
<div class="c-content-main__foo">...</div>
<!-- ❌ 悪い例 -->
<div class="c-foo">...</div>
</div>