Category
2018.08.30
【CSS設計】モラルとプライドとCSS -SMACSS編-
さいさい
こんにちは！
Webデザイナー兼夏休みは実家に帰らせていただきます担当のさいさいです。
前回はCSS設計の具体的な手法第二弾として
BEMについてご紹介しました。
今回は、とうとう
最終回
SMACSSについてです！
前回記事はコチラ↓
【CSS設計】モラルとプライドとCSS -BEM編-
早速本題に入ります✌(‘ ω ‘)✌
SMACSS(スマックス)とは
Scalable and Modular Architecture for CSS
これまでご紹介したOOCSSやBEMの流れから
Jonathan Snookさんが考案した設計方法です。
基本的に、コード書く量を減らすとか、
メンテナンスしやすくするとか、
パーツの使い回しがきくようにする、
といった部分はOOCSSやBEMと同じです。
SMACSSでは、5つのルールに則ってCSSを構築していきます。
・Base ベース
・Layout レイアウト
・Module モジュール
・State ステート(状態)
・Theme テーマ
ではそれぞれのルールについて見てみます✌(‘ ω ‘)✌
Baseルール
まずはベースルールについてです。
https://smacss.com/book/type-base
ざっくり言うとサイト全体に関わるスタイルを記述します。
リセット用CSSや、フォントサイズ、
フォントカラー、aタグのスタイル等がベースルールに含まれます。
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
max-width: 100%;
height: auto;
}
a {
color: blue;
}
a:hover {
color: navy;
}
また、ベースルールはサイト全体に関わるスタイルなので、クラスを付与せずセレクタに対してそのままスタイルを書いてOKです！
Layoutルール
次はレイアウトルールについてです。
https://smacss.com/book/type-layout
ヘッダーやフッター、コンテンツ、サイドバーなど、
ページ内のおおまかなレイアウトを決めるルールです。
クラス名の先頭にl-(layoutのlですね！)またはlayout-を付けるか、
IDを付けてスタイルを指定していきます。
#header, #footer {
width: 100%;
}
#header {
margin-bottom: 20px;
}
#footer {
margin-top: 20px;
}
.l-main {
float: left;
width: 800px;
}
.l-side {
float: right;
width: 200px;
}
レイアウトルールはカラムデザインにも使えます！
.l-colum01 { width: 100%; }
.l-colum02 { width: 50%; }
.l-colum03 { width: 33.3%; }
.l-colum04 { width: 25%; }
こんな感じです✌(‘ ω ‘)✌
Moduleルール
いよいよ中盤！モジュールルールいきまーす！
https://smacss.com/book/type-module
モジュールルールは、
そのままですがモジュールに関するルールです。
再利用可能なパーツと言った方が
わかりやすいかしら(‘-’)
<div class="box"> <h2 class="box-title">タイトルタイトルタイトル</h2> <p class="box-text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div>
.box {
background: #fff;
border: #c8c8c8 1px solid;
}
.box-title {
font-size: 120%;
font-weight: bold;
}
.box-text {
font-size: 100%;
}
BEMでいうところのBlockとElementのようなものです✌(‘ ω ‘)✌
.box h2 {
font-size: 120%;
font-weight: bold;
}
.box p {
font-size: 100%;
}
SMACCSではこのような書き方もOKなのですが、セレクタにスタイルを書く場合は、他の要素への影響範囲に気をつけなければいけないです(‘-‘)
Stateルール
終わりが見えてきた！ステートルールでーす！
https://smacss.com/book/type-state
ステートルールはその要素の”状態”を表すルールです。
BEMのModifierみたいなものです✌(‘ ω ‘)✌
<nav>
<ul class="gnav">
<li class="gnav-item is-current">トップ</li>
<li class="gnav-item">会社概要</li>
<li class="gnav-item">採用情報</li>
<li class="gnav-item">お問い合わせ</li>
</ul>
</nav>
.gnav {
text-align: center;
}
.gnav .gnav-item {
display: inline-block;
margin: 0 20px;
color: #555;
}
.gnav .gnav-item.is-current {
font-weight: bold;
}
クラス名の先頭にis-をつけます！
Themeルール
とうとうラスト！テーマルールでーす！
https://smacss.com/book/type-theme
テーマルールは全体に影響を及ぼすルールです。
同じ様なサイトを複数作って色だけ変える、みたいな時に使えます！
ベースになるサイトで
.title {
color: black;
}
というCSSを使っていたとして
.title {
color: red;
}
これを後に読み込めばテキストのカラーを変更できます✌(‘ ω ‘)✌
まとめ
今までにご紹介してきたOOCSSのBEM流れをくんでいるとはいえ、この2つよりはややルールがゆるいですよね(‘-‘)
その分注意しなきゃいけないのが、CSSの影響範囲です！
ゆるい分CSSが崩れやすいということですね。
また、その分CSSを書き始める前に設計をしっかり考え込まないといけないです (‘-‘)
これまで4回に渡ってCSS設計についてご紹介してきましたが
わたしの個人的かつ率直な感想と致しましては…
・CSS設計はほんとにほんとに超大事！
・でも「これだ！」って思うのはなかなか無い
というのが正直なトコロです笑
ご紹介した3つのうちどれかを採用する、というのも良いのですが
それをベースにプロジェクトやメンバーに合わせて独自ルールを構築するのが
結局一番やりやすいんじゃないかなぁ〜と思いました✌(‘ ω ‘)✌
もっと詳しく知りたい方はこちらもどうぞ！
【HTML5】articleとsectionを正しく使い分けよう！
