SMACSSのLayout（L）カテゴリで頻出するクラス名一覧
SMACSS（Scalable and Modular Architecture for CSS）でよく使われるクラス名を一覧にしました。
頻出クラス名一覧
レイアウト
| クラス名 | 役割・用途 |
|---|---|
.l-wrapper |
サイト全体を囲むラッパー（コンテナ） |
.l-header |
ヘッダー（サイト全体の上部） |
.l-main |
メインコンテンツエリア |
.l-sidebar |
サイドバー（ナビゲーションや補助情報） |
.l-footer |
フッター（サイトの下部） |
.l-content |
メインのコンテンツエリア |
.l-grid |
グリッドレイアウトを管理するコンテナ |
.l-section |
大きなセクションを定義する |
.l-container |
コンテンツ中央揃えのためのコンテナ |
.l-column |
カラム（カラムレイアウトで使用） |
.l-row |
行（グリッドシステムの行） |
.l-page |
1ページ全体を囲む要素 |
.l-nav |
ナビゲーションエリア |
.l-hero |
ヒーローエリア（ファーストビューの大きなエリア） |
ポイント
- レイアウトの大枠を決めるクラス なので、デザインの詳細（色・フォント・マージンなど）はModule（M）側で管理することが多い。
- レイアウトを汎用化 しておくことで、再利用性を高める。