2019/11/1の勉強会で発表したものです。

1. SMACSS入門
発表者：トビウオ

2. 雑なCSSにありがちなこと
• 要素セレクタのCSSをガッツリ書いてしまう
⇒影響範囲が広すぎるため、修正が面倒になる
この要素の設定を変更すると
サイト全体のデザインが変わるため、
ごちゃごちゃしすぎると混乱の素

3. 雑なCSSにありがちなこと
• CSSの設定を上書きする「!important」の乱用
⇒どのCSSが適用されているかが分かりにくい
!important 指定されたものは
上書きしにくいので、必要最小限に
することが求められる

4. 雑なCSSにありがちなこと
• idセレクタで書いたのでCSSを使い回せない
⇒記述が冗長化、コードの再利用性が落ちる
特にmarginなど、レイアウト指定の
CSSは、サイトデザインの観点から
複数回同じものを使いがち

5. ではどうするか？
• CSSは原則、クラスセレクタで行う
• サイト全体に及んでいいなら要素セレクタもOK
• クラスセレクタの分類について統一的なルールを定める
• BEM、OOCSS、 SMACSS などがある
今回紹介する命名規則

6. SMACSSの基本
• CSSの設定を、次の5種類に分類する
• ベース
• レイアウト
• モジュール
• 状態(ステート)
• テーマ

7. • サイト全体で統一する設定を要素セレクタで記述する
• 属性セレクタ・疑似クラスセレクタ・子セレクタ・兄弟
セレクタは使用していい
• いわゆる「CSSリセット」などもここに含まれる
ベースルール

8. • marginやdisplayなど、レイアウトについての設定をIDセレ
クタかクラスセレクタで記述する
• プレフィクスとして「l-」とか「grid-」とかを付けて分か
りやすくすることが推奨されている
レイアウトルール

9. • 吹き出しやサイドバーなど、再利用可能なモジュラーパ
ーツについての設定をクラスセレクタで記述する
モジュールルール

10. • 「入力可否」「視認性」など一時的な設定について、クラス
セレクタで記述する。プレフィクスは主に「is-」が使われる
• 唯一、!importantの使用が許される。ただし乱用は避けたい
状態(ステート)ルール

11. • サイトデザインの設定を、クラスセレクタで記述
• プレフィクスは「t-」「theme-」など
テーマルール

12. •
モジュールルールにおいて「親要素のセレクタによって子要素のセレクタの挙動を変
える」ような書き方は避けるべき。挙動分けが必要なら別の名前を付けよう
注意点

13. 作成例
↑HTML
→
CSS←
実行例

14. 参考資料
• Scalable and Modular Architecture for CSS(公式サイト)