SMACCSについて見直した
SMACCSに関しては以前から良いなーと思っていたCSSの設計手法で、勉強した後からSMACCSっぽい設計を採用していたのですが、ふと見直したくなって勉強し直しました。
使う意義
個人的にはファイルを分けることで、どこにどんな記述をしたか分かりやすく、管理しやすいというのが利点だと考えていましたが、その他にも、
- クラス名が被る事による汚染のリスクを減らせる
- クラス名を見てどのオブジェクトの拡張か分かる
- セレクタの詳細度が減らせる
という利点もあるという話も出てきて( ﾟдﾟ)ﾊｯ!となりました。
SMACCSの考え方
Base
各要素のデフォルトスタイルを記述する。reset.cssやnormalize.cssなんかはココに含まれる。
この他にもhtmlやbodyに記述する全体の背景やフォントファミリーなど全体に適応させるスタイルを記述する。
また、ココに書いたものは基本的には変更しない。
Layout
ヘッダーやフッター、コンテンツエリア、サイドバーなどの大枠のレイアウトに関するもの。
また、プレフィックスとして .l- を付けることで周りのクラスと区別する。
Module
繰り返し利用可能なオブジェクトに関するもの。
例えばボタンや見出し、リンク、メッセージボックスなど。
State
アコーディオンメニューやタブなどで利用される、JavaScriptによって切り替わる状態を表すもの。
.is-hidden {display: none;}
.is-tab-active {display: block;}
プレフィックスとして .is- を付けることが推奨されているようです。
命名規則
ベースとなるオブジェクトの名前を継承した名前を付ける。
`SMACCSに関しては以前から良いなーと思っていたCSSの設計手法で、勉強した後からSMACCSっぽい設計を採用していたのですが、ふと見直したくなって勉強し直しました。
使う意義
個人的にはファイルを分けることで、どこにどんな記述をしたか分かりやすく、管理しやすいというのが利点だと考えていましたが、その他にも、
- クラス名が被る事による汚染のリスクを減らせる
- クラス名を見てどのオブジェクトの拡張か分かる
- セレクタの詳細度が減らせる
という利点もあるという話も出てきて( ﾟдﾟ)ﾊｯ!となりました。
SMACCSの考え方
Base
各要素のデフォルトスタイルを記述する。reset.cssやnormalize.cssなんかはココに含まれる。
この他にもhtmlやbodyに記述する全体の背景やフォントファミリーなど全体に適応させるスタイルを記述する。
また、ココに書いたものは基本的には変更しない。
Layout
ヘッダーやフッター、コンテンツエリア、サイドバーなどの大枠のレイアウトに関するもの。
また、プレフィックスとして .l- を付けることで周りのクラスと区別する。
Module
繰り返し利用可能なオブジェクトに関するもの。
例えばボタンや見出し、リンク、メッセージボックスなど。
State
アコーディオンメニューやタブなどで利用される、JavaScriptによって切り替わる状態を表すもの。
.is-hidden {display: none;}
.is-tab-active {display: block;}
プレフィックスとして .is- を付けることが推奨されているようです。
命名規則
ベースとなるオブジェクトの名前を継承した名前を付ける。
`
実際に使うには
よくやる方法だとこれまで出てきた分類をそのままファイル名にし、SassやLESSなんかのCSSメタ言語で扱う。
``SMACCSに関しては以前から良いなーと思っていたCSSの設計手法で、勉強した後からSMACCSっぽい設計を採用していたのですが、ふと見直したくなって勉強し直しました。
使う意義
個人的にはファイルを分けることで、どこにどんな記述をしたか分かりやすく、管理しやすいというのが利点だと考えていましたが、その他にも、
- クラス名が被る事による汚染のリスクを減らせる
- クラス名を見てどのオブジェクトの拡張か分かる
- セレクタの詳細度が減らせる
という利点もあるという話も出てきて( ﾟдﾟ)ﾊｯ!となりました。
SMACCSの考え方
Base
各要素のデフォルトスタイルを記述する。reset.cssやnormalize.cssなんかはココに含まれる。
この他にもhtmlやbodyに記述する全体の背景やフォントファミリーなど全体に適応させるスタイルを記述する。
また、ココに書いたものは基本的には変更しない。
Layout
ヘッダーやフッター、コンテンツエリア、サイドバーなどの大枠のレイアウトに関するもの。
また、プレフィックスとして .l- を付けることで周りのクラスと区別する。
Module
繰り返し利用可能なオブジェクトに関するもの。
例えばボタンや見出し、リンク、メッセージボックスなど。
State
アコーディオンメニューやタブなどで利用される、JavaScriptによって切り替わる状態を表すもの。
.is-hidden {display: none;}
.is-tab-active {display: block;}
プレフィックスとして .is- を付けることが推奨されているようです。
命名規則
ベースとなるオブジェクトの名前を継承した名前を付ける。
`SMACCSに関しては以前から良いなーと思っていたCSSの設計手法で、勉強した後からSMACCSっぽい設計を採用していたのですが、ふと見直したくなって勉強し直しました。
使う意義
個人的にはファイルを分けることで、どこにどんな記述をしたか分かりやすく、管理しやすいというのが利点だと考えていましたが、その他にも、
- クラス名が被る事による汚染のリスクを減らせる
- クラス名を見てどのオブジェクトの拡張か分かる
- セレクタの詳細度が減らせる
という利点もあるという話も出てきて( ﾟдﾟ)ﾊｯ!となりました。
SMACCSの考え方
Base
各要素のデフォルトスタイルを記述する。reset.cssやnormalize.cssなんかはココに含まれる。
この他にもhtmlやbodyに記述する全体の背景やフォントファミリーなど全体に適応させるスタイルを記述する。
また、ココに書いたものは基本的には変更しない。
Layout
ヘッダーやフッター、コンテンツエリア、サイドバーなどの大枠のレイアウトに関するもの。
また、プレフィックスとして .l- を付けることで周りのクラスと区別する。
Module
繰り返し利用可能なオブジェクトに関するもの。
例えばボタンや見出し、リンク、メッセージボックスなど。
State
アコーディオンメニューやタブなどで利用される、JavaScriptによって切り替わる状態を表すもの。
.is-hidden {display: none;}
.is-tab-active {display: block;}
プレフィックスとして .is- を付けることが推奨されているようです。
命名規則
ベースとなるオブジェクトの名前を継承した名前を付ける。
`
実際に使うには
よくやる方法だとこれまで出てきた分類をそのままファイル名にし、SassやLESSなんかのCSSメタ言語で扱う。
``
こんな感じでstyle.scssに読み込む方法をよく使います。
もうちょい使ってみないとな