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>