とある新規サービスでCSSの設計をしたのでそのまとめ

新規サービスでCSSの設計をする際にやってみたこと

今行っている現場で新しいサービスを開発するということでフロントエンド全般を任されることになりました。そこでCSS設計をしなければならないのですが、その際に僕がやってみたことをまとめてみます。

Ads

プリプロセッサーの導入

  • 変数の管理
  • CSSを小分けしたい

このへんは絶対やっておきたいことでした。というのも、カテゴリごとに色分けをしたり、背景色も何通りかあるデザインでした。変数で管理することでわかりやすくなりますし、カラーの重複や似たカラーが出てきてしまうことも防げるメリットがあります。

さらにCSSを小分けにすることで目的のセレクタを見つけやすくなりますね。importしてもいいんでしょうけど、読み込みを考えると1ファイルの方がいいですしということでプリプロセッサーの導入を決めました。

Sassを使うことにした

http://sass-lang.com/

http://sass-lang.com/

LessとかStylusなどCSSプリプロセッサはたくさんあるんですが、今回はSassでってことになりました。というのも、情報が多いですし、この現場では以前にSassを使ったサービスもあるようで、コーダーやデザイナーも触ったことがあり、学習コストが低そうだなと思ったからです。

それに最近だとBootstrapやFoundation 6 もSassがメインになっていますね。

コンパイルの自動化

http://gulpjs.com/

http://gulpjs.com/

これは、Gulp.jsでやります。基本的にgulpfile.jsとpackage.jsonがあればコマンド一発ですしね。Sassで書いていくなら一回Gulpでやっておけば後が楽になります。

Sassのコンパイルとjsの圧縮もできるようにしてあります。今後運用していく中でもっと使いやすいものにしたいですね。
gulpfile.js、package.json、csscomb.jsonは下記からダウンロードしてください。

FLOCSSとBEM

まずFLOCSSは最初から採用しようと思っていました。なんでかっていうとわかりやすいからですね。SMACSSとかもやったことあるんですけど、自分はFLOCSSが一番わかりやすいです。FLOCSSを使うので必然的にMindBEMdingでクラスを書きます。

ディレクトリ構成

大まかな構成としては以下のようにしました。foundationの中にSassのmixinをまとめて管理するmxins、あとは変数の管理をする_variables.scssがここにはいります。layoutやobjectについてはFLOCSSの考え方そのまま採用です。

├── foundation
│   ├── mixins
│   └── _base.scss
│   └── _sanitize.scss
│   └── _variables.scss
├── layout
└── object
    ├── component
    ├── project
    └── utility

utilityはこれ

Utilityについては以前記事にもした、こちらを使いました。セレクタなども「.u-」をつけているのでそのまま使えます。

接頭辞について

これは基本的にFLOCSSのやりかたそのままです。

.l- // layout
.c- // component
.p- // project
.u- // utility
.is- // 状態を表す

たとえば「.is-open」「.is-close」「.is-active」など状態を表すものは「.is-」ではじまります。

.js- // JavaScript

これはJSで動くなど何かしら操作したときなどにセレクタで呼び出しますが、その際はスタイルで定義されたセレクタを使うのではなく必ず「.js-hoge」などで行うことを義務付けします。そうすることで文書構造、スタイル、スクリプトを完全に分離することができてHTMLを見るだけで何が行われているのか、残さなければいけないセレクタなのかわかりやすくなります。

SassとBEM(MindBEMding)のお話

SassとBEM(MindBEMding)って相性いいんですよね。BEMで書くと基本的にBlockにあたる部分を何回も書く必要があります。たとえば・・・

.c-menu{
	
}
.c-menu--black{
	
}

.c-menu--white{
	
}

.c-menu__item{
	
}

こんなかんじですね。それをSassで書くと・・・

.c-menu{
	
	&--black{

	}

	&--white{

	}

	&__item{

	}
}

というようにBlockを一回書くだけで出来てしまいます。ただ、これにも問題があってやりすぎると読みづらくなります。Sassによる上記の書き方だとどんどんネストしていくことも考えられます。そうするとぱっと見で理解するのが難しくなるのである程度ルールは必要だと思います。

.c-menu{
	&--block{

	}

	&--white{

	}
}

.c-menu__item{
	
}

.c-menu__item__hoge{
	
}

というようにElementはネストさせないようにして、Modifierはネストさせるといいかもしれません。ある程度はSassの書き方ではなくCSS本来の書き方にした方がみやすい部分も出てきますね。

Sassのコメントアウトでもっと見やすくする

コメントアウト見出しがあるだけで見やすくなりますよね。それもルール化しておくとより管理がしやすくなります。

さらに、Sassの場合コンパイル後も表示されるコメントアウト、と表示されないコメントあうとがあります。それをうまく使うことで優先度も出しやすいです。

コンパイルしても見えるもの

基本的にFLOCSSのディレクトリを表すものにしておきます。Level4は備考として使います。なのでほとんど使う機会はないです。

/* =========================================================
 Level 1
========================================================= */

/* ---------------------------------------------------------
 Level 2
--------------------------------------------------------- */

/* Level 3
--------------------------------------------------------- */

/* Level 4 */

コンパイルすると見えないもの

Level 5は変数を管理する「_variables.scss」内のみです、ほとんど。というのもコンパイル後に変数は表示されるものではないので、ここで見えるコメントアウトしても生成されるcssが見づらいものになってしまいます。

Level6と7についてはBEMのBlock、Element、Modifierを表すようにするといいと思います。

// ---------------------------------------------------------------
//	Level 5
// ---------------------------------------------------------------

// Level 6
// --------------------

// Level 7

コメントアウトのルールのサンプル

app.scss

/* =========================================================
 Foundation
========================================================= */
@import "foundation/variables";
@import "foundation/mixins";

/* ---------------------------------------------------------
 Sanitize
--------------------------------------------------------- */
@import "foundation/sanitize";
 
 /* ---------------------------------------------------------
 Base
--------------------------------------------------------- */
@import "foundation/base";
 


/* =========================================================
 Layout
========================================================= */
@import "layout/footer";
@import "layout/gnavi";
@import "layout/header";
@import "layout/main";
@import "layout/sidebar";


/* =========================================================
 Object
========================================================= */
/* ---------------------------------------------------------
 Component
--------------------------------------------------------- */
@import "object/component/btn";
@import "object/component/menu";
 

 /* ---------------------------------------------------------
 Project
--------------------------------------------------------- */
@import "object/project/hogehoge";

 
 /* ---------------------------------------------------------
 Utility
--------------------------------------------------------- */
@import "object/utility/border";
@import "object/utility/clearfix";
@import "object/utility/display";
@import "object/utility/float";
@import "object/utility/font-color";
@import "object/utility/font-size";
@import "object/utility/line-clamp";
@import "object/utility/list-style";
@import "object/utility/margin";
@import "object/utility/misc";
@import "object/utility/padding";
@import "object/utility/position";
@import "object/utility/text-align";
@import "object/utility/text-decoration";
@import "object/utility/text-truncate";
@import "object/utility/vertical-align";
@import "object/utility/width";

_variables.scss

// ---------------------------------------------------------------
//	Base-Size
// ---------------------------------------------------------------
$base-size: 				8;


// ---------------------------------------------------------------
//	Font
// ---------------------------------------------------------------
$font-family-base: 			Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
$font-size-base: 			14px;


// ---------------------------------------------------------------
//	Line-hieght
// ---------------------------------------------------------------
$line-height-base: 			1.4;

// ---------------------------------------------------------------
//	Brand-color
// ---------------------------------------------------------------
$brand-color: 				#592b7b;
$brand-color-primary:		#332b3d;
$brand-color-highlight:		#7fdde3;
$brand-color-highlight-dark:#147278;
$brand-color-action:		#76145e;

// ---------------------------------------------------------------
//	Margin
// ---------------------------------------------------------------
$margin-base:				$base-size + px;
$margin-small-base:			$base-size / 2 + px;
$margin-large-base:			$base-size * 2 + px;
$margin-large-x-base:		$base-size * 3 + px;
$margin-large-xx-base:		$base-size * 4 + px;
$margin-large-xxx-base:		$base-size * 5 + px;
$margin-large-xxxx-base:	$base-size * 6 + px;

_btn.scss

/* btn
--------------------------------------------------------- */

// Block
// --------------------
.c-btn{
	
	// Element
	// --------------------
	&__icon{

	}
}


// Modifier - color
// --------------------

// red
.c-btn__red{
	
}

// black
.c-btn__black{
	
}

おわりに

フロントエンドエンジニアなら普通のことしかやってないなー。もっといいやり方があるとは思うので、まだまだ精進しなきゃですね。

とはいえ、じつは一番大事なのは、作って終わりではなく継続的運用していくのでガイドラインを作りそれをチームで共有することなんです。これがあるのとないのとではCSSの破綻を防ぎやすくなりますし、新しく入るメンバーにも良心的ですね。

なので、僕も簡単なガイドラインは作ったんですが、作業が落ち着いてきたら、もう少し付け足しを行う予定です。

いいなと思ったらシェアお願いします

Ads
ページの先頭へ