僕が普段使っているCSSのルールをコーディング規約にしてみた

前提

• Railsのプロジェクトで使う想定。フロントの技術力はまばらなので規約をある程度決めてしまってあとは個々人がCSS力をつければいいという状況にしたい
• (Railsで使うので)SCSS or Sassを採用。
• 俺はこう思わない、とかここもルール化するといいよ！というのがあったら気軽にコメントください。
• 【初心者向け】CSSを綺麗に書くために決めている基本ルールも参考に。

結論をざっくりいうと

• BEM
• SMACSS
• HTML/CSSであるあるの命名
• あとは見やすく、綺麗に書けるような細かいtips

上のようなことが書いてあります。

余談

普段使っているmixinも別のQiitaで共有してこれも規約の1つにしたいと考えています。書いたらリンク追加します。

参考

• メンテナブルCSS(サイバーエージェント)
• Google HTML/CSS Style Guide

それでは以下から。
見出し以下必要なところにはコメント入れてます。

ルール

インデントは2タブで統一

コメントは//のみ使う

特に/**/を使う理由がなければ、//のほうがいいかなと。分かりやすいですし。

色定義はHEXで

NG

.hogehoge {
  color: rgba(255,255,255)
}

OK

.hogehoge {
  color: #000;
}

rgba指定したいときもSCSSなら、

.hogehoge {
  color: rgba(#000, 0.8);
}

といけるのでHEXを使う。

色定義は出来るなら三桁で記述する

NG

.hogehoge {
  color: #aabbcc;
}

OK

.hogehoge {
  color: #abc;
}

クラス名の単語はハイフンつなぎにする

キャメルケースやアンダースコアつなぎなど色々とあるとは思うがハイフンつなぎにする。
理由はキャメルはJSで使いたいと思うことがあること、アンダースコアはBEMのelementと見間違える可能性があると思ったから。ハイフンもmodifierとかぶるじゃん、というのはあるとは思いますが使用頻度の問題でチョイスしました。

IDセレクタは使わない

基本的にクラスで。IDはJSで使いたいとか、スピードが云々とか色々あるかとは思いますが、今回は省略。気になる方はぐぐってみてください。

important!は使わない

jQueryプラグインの制約などよっぽど特別な事情が無い限りNG。勝手につかったらイエローカードものです。

制約の強いCSSは書かない

NG

p.hoge {}

OK

.hoge {}

NGの例はpタグでしか使えない。これは汎用性がない。
タグで限定することはしない。

整数部分が0の少数値は整数部分を省略する

NG

.hogehoge {
  margin: 0.8em;
}

OK

.hogehoge {
  margin: .8em;
}

好みですが、ゼロ省略で。

ゼロには単位をつけない

NG

.hogehoge {
  margin: 0px;
}

OK

.hogehoge {
  margin: 0;
}

プロパティはabc順にする

NG

.hogehoge {
	color: red;
	background-color: blue;
}

OK

.hogehoge {
	background-color: blue; / * abc順に */
	color: red;
}

可読性向上のため。役割ごとに分けるとか色々あるとは思いますが機械的にできるので。

mixinはプロパティの最後に書く mixin内もabc順にする

NG

.hogehoge {
	@include mixin_name;
	background-color: blue;
	color: red;
}

.hogehoge {
	background-color: blue;
	color: red;
	@include mixin_name;
}

のようにincludeは最後に書く。@includeもabc順に書くようにする。

プロパティは以下のルールに従う

1. プロパティの終わりにはセミコロンを付ける(SCSSの場合)
2. コロンのあとには半角スペース
3. CSSルールごとに1行に書く
4. プロパティはスペースを空ける
5. ブロックの開始位置はセレクタに半角スペース空けたところから

下のような感じで書いて見やすくしましょう。

.hogehoge { // 5
	background-color: blue; // 1,2,4
	color: red; // 3
}

別々のセレクタとプロパティは改行して書く

NG

.hogehoge, .fugafuga {
  color: red;
}

OK

.hogehoge,
.fugafuga {
  color: red;
}

可読性を重視。

HTML/CSSの命名は分かりやすいものにする

この記事 が分かりやすい。
HTML/CSSでよく使われる命名というのがあるので、まずはそれに則って命名するほうが良い。

画像の命名は分かりやすいものにする

具体的には 背景画像やただの写真だったら先頭にimg(image)、アイコンだったらiconのようにする。

ロゴ→ img_logo
アイコン→ icon_smile, icon_arrow
チュートリアル画像→ img_tutorial

のようにしている。このようにすると、役割が最初の1単語、2単語を読めばはっきり分かる。
上の例でなくても、はっきりとルールを決めればOK。

BEMを使う

BEMを導入してルールを追加することで命名で迷うことが減るため採用。
この記事とか分かりやすい。

CSSの単語の区切りはハイフンにする

NG

.hogehoge_fugafuga {}

OK

.hogehoge-fugafuga {}

BEMでアンダースコア2つは使うので、ハイフンを採用。modifierでもハイフンを使うことは使うが使用頻度の問題。
キャメルケースを採用する手もあるかなとは思ったがJSで使うクラスと混同しそうなので使用していない。
ちゃんとしたルールを決めればこのあたりはなんでもいいとおもう。

画像の区切りはアンダースコアにする

NG

img-hello.png

OK

img_hello.png

好みです。ダブルクリックした時にすぐ選択できるのがなんとなく好きです。

別々のCSSルールは改行する(スペースはあけない)

NG

.hogehoge {
  color: blue;
}

.fugafuga {
  color: red;
}

OK

.hogehoge {
  color: blue;
}
.fugafuga {
  color: red;
}

スペースは空けない。

意図的に改行するときはコメントアウトをつける

NG

.music {
  color: blue;
}



.video {
  color: red;
}

OK

//
// 音楽
//
.music {
  color: blue;
}

//
// ビデオ
//
.video {
  color: red;
}

意図的に改行させる場合は理由をコメントアウトで示す。// 1つだと他のコメントアウトとの違いがわかりづらいので、//3つにして、真ん中に説明を書く。

ショートハンドを使う

上書きしたいなど何かしら使えない理由がある場合は、 上右下左 の時計周りで記述する。

NG

.hogehoge {
  padding: 10px 0 10px 0;
}

OK

.hogehoge {
  padding: 10px 0 10px;
}

ショートハンドを使えない場合、SCSSなら

.hogehoge {
  padding: {
    top: 10px;
    right: 20px;
    left: 15px;
  }
}

のように書くとスッキリ書ける。

ベンダープレフィックスがあるときはmixinを使ってひとつにまとめる

NG

 .hogehoge {
   -webkit-box-shadow: 10px 10px;
   box-shadow: 10px 10px;
 }

OK

  // mixinは省略
  .hogehoge {
    @include .box-shadow(10px 10px);
  }

ファイル構成

smaccsを採用。

stylesheets
∟ base
   ∟ _base.scss
   ∟ _mixin.scss
   ∟ _reset.scss
   ∟ _utility.scss
∟ font ※ Webフォントを使う場合
∟ layout
   ∟ _grid.scss
   ∟ _layout.scss
∟ module
   ∟ _module_name.scss
application.scss

のような感じにパーシャルにする。

詳細は 公式を参照。

application.sassは以下のような感じにしていました。(このときはSassを採用していました)

@charset "utf-8"

// リセット
@import 'base/reset'
// mixin
@import 'base/mixin'
// ベース
@import 'base/base'
// スーパー汎用クラス
@import 'base/utility'
// hihglight
@import 'base/highlight'
// グリッド
@import 'layout/grid'
// .l-container,.l-headerなど
@import 'layout/layout'
// module
@import 'module/g-ad'
@import 'module/top_section'
@import 'module/details'
@import 'module/header_content'
@import 'module/side_content'
@import 'module/nav'
@import 'module/subnav'
@import 'module/search'
@import 'module/copyright'
@import 'module/category'
@import 'module/breadcrumbs'

まとめてimportしていました。
Railsだとscssファイルが自動で生成されると思いますが、それは基本的に使わないで1つ1つmodule(component)にしていくイメージです。

reset.cssを使う

normalizeではなくreset.cssを使う。
加えてプロジェクトに必要なものを追記していく感じ。
normalizeだと人によって若干ずれたりするのかなーという懸念から。

大体こんな感じにシンプルにしています。(見やすくするためにminifyしていないです)

@-ms-viewport {
  width: device-width;
}


html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
dfn,
em,
img,
ins,
q,
strong,
small,
sub,
sup,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  //font: inherit
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

blockquote,
q {
  quotes: none;
  &:before,&:after {
    content: "";
    content: none;
  }
}

ol,
ul {
  list-style:none {}
}

li {
  list-style-type: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th,
td {
  text-align: left;
}

a {
  &:active,
  &:focus {
    outline:none {}
  }
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

// button,input
button {
  border: 0;
  background: 0;
}

input,
textarea {
  margin: 0;
  padding: 0;
}

button,
input {
  &::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
}

textarea {
  vertical-align: top;
}

button,
input,
select,
textarea, {
  font-family: inherit;
  outline: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
input[disabled] {
  cursor: default;
}

input[type="search"] {
  border-radius: 3px;
  line-height: 1;
  -webkit-appearance: none;
  &::-webkit-search-cancel-button,
  &::-webkit-search-decoration {
    -webkit-appearance: none;
  }
}

[data-break=""] {
  display: inline-block;
}

modernizrを入れる

modernizrを入れるとブラウザやバージョンに応じた対応がやりやすくなるため。
railsだとgemがある。

ダミーイメージ

なんでもいいが、placehold.itが使いやすくておすすめ。

<img src="http://placehold.it/200x200">