htmlcss SMACSSでCSSを設計しよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

SMACSSでCSSを設計しよう

HTML×CSS|2019年12月28日

2019年12月28日
  • このエントリーをはてなブックマークに追加

CSSの設計は非常に重要な考え方です。
コードの数が増えていくと、被ってしまったり、混乱してしまったりします。
結果的に、役割の判別が難しく、メンテナンスしずらくなるでしょう。

では、どうすればメンテナンスしやすいコードになるか。

前回はFLOCSSを学びましたが「BEM」や「OOCSS」など、他にも色々あります。
そのいくつかある方法の中で「SMACSS」もよく使われる設計思想の1つです。
FLOCSSよりは多少シンプルですね。
ぜひSMACSSを覚えて、メンテナンス性の高いCSSを書けるようになりましょう。

SMACSSとはなにか

SMACSSでCSSを書く場合、まず下記5つのカテゴリーにわけられます。

  • ベース – bodyやpなど、要素に直接当てる、基本スタイル
  • レイアウト – エリアごとに分けたスタイル
  • モジュール – 再利用できる、個々のパーツ
  • ステート(状態) –  レイアウトやモジュールが変化した時のスタイル
  • テーマ – サイトの見た目やデザインを制御する

これら5つの設計に基づいて書くCSSがSMACSSです。
ファイル構成は下記のようになります。

  • base.css
  • layout.css
  • module.css
  • state.css
  • theme.css

丁度FLOCSSでフォルダ別に分けた内容を、ファイル別にしたような形ですね。
なおSMACSSとFLOCSSの使い分けですが下記を意識すると良いでしょう。

  • FLOCSS – よりしっかりした設計を作りたい場合
  • SMACSS – ざっくり設計で良い場合

見たほうが早いので、実際に設計を見ていきましょう。

ベースについて

reset.cssはベースに入ります。
normalize.cssやsanitize.cssもベースに入ってきますね。
pやul、hやdlなど、基本的なタグに関して当てられているスタイルです。
要素に対して、デフォルトで反映させておくCSSを書きましょう。

レイアウトについて

サイドバー、ヘッダー、フッター、メインなど、大まかなレイアウトです。
ざっくりとした全体の枠組みを指定する時に使います。
セクション別の大まかレイアウトもここに所属します。
命名規則は下記を参考にしてみてください。

.l-header{
width:100%;
}
.l-footer{
width:100%;
}
.l-sidebar{
width:30%;
}
.l-main{
width:70%;
}

class名の前にl-とつけることで、レイアウトだと認識できます。
頭文字に各役割のアルファベットをつけることで、役割が一目瞭然になります。
なお、こうした頭文字をプレフィックスと言います。

モジュール

ボタンや画像、文字やタイトルなど、各パーツのデザインを担当します。
横並びにしたり、隙間を空けたりするのはレイアウトでの担当です。
モジュールではパーツのデザインだけで、一切レイアウトは担当しません。
下記の例を確認してみてください。

.c-buttonType_a{
background:#000;
border-radius:5px;
text-align:center;
padding:10px;
min-width:150px;
}

このように、ボタンであればボタンのデザインだけを作ります。
ボタンの位置やレイアウトなどは、レイアウトのレイヤーで指定しましょう。

モジュールはあくまで再利用可能なパーツです。
それ意外の影響範囲は他の項目にまかせてください。
FLOCSSで言えばコンポーネントと似た役割を果たします。

ステート(状態)について

JavaScriptなどで、変化を加えたり、マウスオーバーで色を変えたり。
何かアクションを起こすことでclassを取り替えるケースがあります。
JavaScriptなどでclassを取り替えることで、状態を変更します。
下記の例を確認してみてください。

.is-over{
background:#000;
}
.is-hidden{
display:none;
}

例えばボタンをクリックした時、背景を黒くするとします。
そんな時は、上記のis-overを加えれば黒くなりますよね。
また、is-hiddenを使えば要素が消えます。
このように状態を変化させるクラスをステートにまとめます。
なお、プレフィックスとしてはisが使われます。

テーマ

デザインの雰囲気を司るclassです。
例えば、デザインを赤から青に変えたいとしましょう。
そんな時はテーマのCSSを変更するだけで変わるようにします。

.theme-font{
color:#000;
}
.theme-background{
background:#afafaf;
}

このように、テーマの基本的な色合いやデザインを決めていきます。
もし色合いを変更したいとなったら、classの色を変更すれば一気に変更できるでしょう。
さらにSassを使うのであれば、色合いも「変数」にすることで、よりメンテナンス性が向上します。
なおテーマのプレフィックスはthemeを使います。

このようにそれぞれCSSに役割分担をすることで、メンテナンス性を獲得できます。
ぜひ、前回のFLOCSSと一緒に考えて使ってみてください。

なお、STARTOUTではSMACSSとFLOCSSを合わせると良いかなと考えています。
フォルダ構成や基本的な考え方はFLOCSSを軸にして考えましょう。

大雑把に言えば、より細かく汎用性が高い形で作れるのがFLOCSSです。
その中でSMACSSの「状態」の概念や「プレフィックス」を取り入れていきます。
FLOCSSでは使っていない考え方ですが、取り入れると便利です。
よりメンテナンス性を向上させた設計をすることが出来ます。

もちろん、どちらか1つの設計を採用することもできます。
ご自身が設計しやすいと思う方法で、ぜひ、挑戦してみてください。

今回のミッション

今回のミッションは、参考サイトの模写です。

ただし、SMACSSとFLOCSSを併用したような形でCSSが書かれています。
フォルダ構成や基本的な考え方はFLOCSSをベースに考えています。

また、メイン画像をクリックすると、赤い枠がつくようにしました。
状態の変化クラスを試すためです。
クリックしてどのように変化しているのか確認してみましょう。

どのようにSMACSSと取り入れるべきか考えながら制作してみましょう。
答えは1つではないので、サンプルを参考に自分なりに作ってみてください。

今回の注意点も、次の項目でご説明させて頂きます。
そちらを参考にしながら進めてみましょう。

■ 一例ファイルのダウンロード
https://startout.work/mission/css/2/mission2.zip

SMACSSの基本的な使い方はすでに説明しました。
それぞれ、意味を考えながら、使ってみましょう。

補足的な注意点

SMACSSを使うにあたり、いくつか注意点があります。
前回のFLOCSSとかぶる部分もありますが、意識してみてください。

idを使わない

基本的にCSSにはidとclassがありますが、idは不要です。
基本的にページ内で1度しか使えないことで、コンポーネント思考が崩れます。
idは基本的にアンカーリンクやJavaScriptとの連携意外使わないようにしましょう。

独立して動かす

他のレイヤーにあるclassと親子構造で動くようにしてはいけません。
必ず独立していて、それ単体で動くように作りましょう。
SMACSSの良いところは、それぞれの機能が独立しているからこそ汎用性が高いことです。
他のCSSから、それぞれ影響を受けないように作りましょう。

ひとまず注意点としては、この2つを守って作ってみてください。
FLOCSSと組み合わせることで、より保守性の高いコーディングができるはずです。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら