はじめに

今回はCSSのスタイルガイド、SMACSSについて勉強する機会があったのでめも。

SMACSS(スマックス)とは

SMACSS公式サイト Scalable and Modular Architecture for CSSの略。 Jonathan Snook氏が考案したCSSスタイルガイド。 BEMやOOCSSに比べてルールがゆるい分、構成をしっかり考えないとCSSを変更した時の影響範囲が広くなってしまうのもSMACSSの特徴。 そして、SMACSSはCSSのルールを5つにカテゴライズすることでより良いCSSを記述していきます。
  1. 1. ベース
  2. 2. レイアウト
  3. 3. モジュール
  4. 4. 状態(ステート)
  5. 5. テーマ
それでは、各カテゴリのルールを見ていきます。

ベースルール

まずはベースルール。 公式サイトには、ページ全体で要素がどう見えるのかを定義するデフォルトスタイル、とあります。要はページ全体に関わるスタイルを書いてくってことですね。 これにはクラスやIDを使用せずセレクタに対しそのままスタイルを書くよう推薦されています。 ▼ベーススタイルの例
body, form {
  margin: 0;
  padding: 0;
}
a {
  color: #039;
}
a:hover {
  color: #03F;
}

レイアウトルール

続いてレイアウトルール。 レイアウトルールではヘッダーやサイドバー、メインコンテントエリアといった主要なコンポーネントのレイアウトを記述。 これにはクラスの先頭にl-やlayout-をつけてスタイルを指定していきます(IDでも良いみたいですが私はl-やlayout-の方が好みです)。
#article {
  width: 80%;
  float: left;
}
#sidebar {
  width: 20%;
  float: right;
}
.l-fixed #article {
  width: 600px;
}
.l-fixed #sidebar {
  width: 200px;
}

モジュールルール

続いてモジュールルール。
sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

ハマった点

僕の場合、共通化したヘッダーの中にスマホ用ナビボタンのクリックアクションをjQueryで実行していたのですが、なぜかそれが機能しない問題が生じました。 どうやらloadメソッドで読み込んだページよりも前にクリックアクション用のjQueryが実行されていたのが原因。 header.htmlに直接クリックアクション用のスクリプトを記述することで対応できました。

参考ページ

https://style01.net/399/ https://qiita.com/exp/items/ac651c452afb374e7e23