2016/06/16 16:05

Slim&Sassコーディング規約#1 -フォルダ構成-

STEP1: 目次

try

comment

⬛︎ Slim&Sassコーディング規約#1 -フォルダ構成-

  • 前提
  • フォルダ構成
  • application.sassの構成
  • controller別sassファイルの基本構成

Slim&Sassコーディング規約#2 -コーディング全般-

  • インデントはスペース2つを使う
  • 基本的にはIDセレクタは使わない
  • コメントスタイルの統一
  • 単色アイコンはwebフォントを使用する
  • レスポンシブ対応について
  • utilityクラスの利用

⬛︎ Slim&Sassコーディング規約#3 -命名規則-

  • 小文字を使う
  • クラス名は英単語
  • クラス名のつなぎはハイフンを使う
  • layoutクラスの命名規則
  • moduleクラスの命名規則
  • 頻出クラス名

⬛︎ Slim&Sassコーディング規約#4 -slim-

  • HTML5を使用する
  • テキストはネストして「|(パイプ)」を使う
  • スタイリングは使用しない

⬛︎ Slim&Sassコーディング規約#5 -sass-

  • プロパティとバリュー間はスペース1つ空ける
  • 要素名で指定するものは最小限にする
  • カラーパレット内の色の指定は変数定義する
  • 色定義はHEXを使う
  • 色の透過
  • ルールとルールの間は1行空ける

response

no response

STEP2: 前提

try

comment

  • Railsでの利用
  • gulp
  • SlimとSassを使用
  • SMACSS(スマックス)の一部採用(ベース、モジュール、レイアウト)。

response

no response

STEP3: フォルダ構成

try

app
∟ images
|  
∟ javascript
|   ∟ _bundle.js
|   ∟ _common.js
|   |
∟ stylesheets
|   |
|   ∟ base
|   |   ∟ _normalize.css(エレメントのデフォルトスタイル)
|   |   ∟ _color.sass(カラーパレットの定義)
|   |   ∟ _default.sass(独自のデフォルトスタイル)
|   |   ∟ _utility.sass(汎用クラス)
|   |
|   ∟ layout
|   |   ∟ _layout.sass(ヘッダー、フッター、コンテイナーなどのスタイル)
|   |
|   ∟ module
|   |   ∟ _m-*.sass(共通化できる部品であるモジュールクラスのsass)
|   |
|   ∟ font
|   |   ∟ font-awesomeやiconmoonのwebフォント
|   |
|   ∟ bootstrap
|   |   ∟ _bootstrap-js.sass
|   |
|   ∟ controller
|   |   ∟ controller.sass(各コントローラーに対するsass)
|   |
|   ∟ application.sass(全てのsassファイルをインポートする)
|
∟ views
|   ∟ partical
|   |   ∟ _header.slim
|   |   ∟ _footer.slim
|   |
|   ∟ controller-action.slim
|
∟ public
|
∟ bower.json
∟ gulpfile.js
∟ package.json

gulp-template

comment

主な開発はappディレクトリ内で行う。

stylesheetsフォルダ内はSMACSSを元にベース、モジュール、レイアウトに分け、さらにRailsのコントローラー単位でsassファイルを分ける。必要に応じてfontやbootstrapを使う。ただしbootstrapはbootstrapのjsプラグインに対するsassのみを使う。

response

no response

STEP4: application.sassの構成

try

// application.sass
@charset "utf-8"

// base
@import "base/normalize"
@import "base/color"
@import "base/default"
@import "base/utility"

// layout
@import "layout/layout"

// module
@import "module/module"

// controller
@import "controller/controller"

comment

application.sassに他の全てのsassファイルをimportする

response

no response

STEP5: controller別sassファイルの基本構成

try

例)corporationコントローラーでアクション名にindexとaboutがある場合

// corporation.sass
.corporation
  &-index

  &-about

comment

controller名の下にネストして&でaction名をつなげる。controllerかつaction単位でスタイルをあてることでRailsでのクラスの名前空間の衝突を防ぐ。

response

no response

Track list including this course