PengNote

勉強した事や行った場所の感想を書くブログ

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に読み込む方法をよく使います。

もうちょい使ってみないとな

参考したもの