Skip to content

Latest commit

 

History

History
83 lines (66 loc) · 2.3 KB

sass-coffee.ja.md

File metadata and controls

83 lines (66 loc) · 2.3 KB
Raw

Sass/Coffeescript コーディング・ガイドライン

はじめに

本文書は、株式会社Karappoの Sass,Coffeescript コーディング・スタイル規準を定めるものである。 HTML・CSSの基本部分はHTML/CSS コーディング・ガイドラインを予め読んでおくこと。

目次

body要素のclassおよびid属性

スタイル定義のためのクラス属性は極力避け、意味的な記述を心がけることで、HTMLをシンプルに保つ。

  • [SHOULD] 基本的にスタイル定義のための属性は極力避けるが、それ以外に意味付けが難しい場合はこの限りではない。（例：.left,.rightなど）
  • [SHOULD] h1,pなど意味の強い要素は、classはあまり付けないようにする
  • [SHOULD] div,spanなど汎用的な要素は、classなどを付けた方が分り易いことが多いので、適宜命名する。
  • [MUST] compassなどsourcemapが使える場合は、有効化しデバッグ効率を上げる。

config.rb

sass_options = { sourcemap: true }

clearfix

  • [MUST] sassのextendを使う 理由：スタイル定義は、極力CSSに集約し、HTML側には記述しないという全体方針に沿う

GOOD

<div class="wrap">
</div>
.wrap
  @extend .clf

BAD

<div class="wrap clf">
</div>

ディレクトリ構成

  • [SHOULD] 以下の構成に従う
.
├─ _assets
│   ├── database
│   │　　├── create_backup.sh
│   │　　└── backup.sql
│   └── design.psd
├─ img
│   └── logo.png
├─ lib
│   ├── blueimp
│   │　　├── blueimp-gallery.css
│   │　　└── blueimp-gallery.js
│   ├── jquery.min.js
│   └── PIE.htc
├─ script
│   ├── _src
│   │　　└── common.js.coffee
│   └── common.js
├─ style
│   ├── _src
│   │　　├── config.rb
│   │　　└── common.css.sass
│   └── common.css
└─ index.html