├── .gitignore ├── LICENSE ├── README.md ├── css-class-name-list.md ├── css-coding-rule.md ├── css-styleguide.md ├── how-to-bem.md ├── how-to-ecss.md ├── image-naming-rule.md └── svg-operating-rules.md /.gitignore: -------------------------------------------------------------------------------- 1 | .git -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Manabu Yasuda 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # styleguide 2 | リポジトリを変更してガイドラインを整理しました。 3 | [coding-guidelines](https://github.com/manabuyasuda/coding-guidelines) 4 | -------------------------------------------------------------------------------- /css-class-name-list.md: -------------------------------------------------------------------------------- 1 | # CSS クラス名リスト 2 | 名前をつけることは難しいですが、とても重要なことです。 3 | 4 | CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 5 | 6 | このドキュメントでは、CSSでよく使われる単語を分類し、意味や機能を短くまとめています。 7 | ただし、見た目やUIの機能をクラス名にするのではなく、デザインの意図やそのコンポーネントの役割をクラス名にすることを推奨します。 8 | 9 | ## 場所 10 | 11 | - `section` - 区分・区画。 12 | - `content` - 文書の内容。 13 | - `article` - 記事。 14 | - `post` - 投稿。 15 | - `top` - 頂上・上部。 16 | - `home`- トップページ。 17 | - `sidebar` - 補足記事。 18 | 19 | ## 比較 20 | 21 | - `main` - 主要な。 22 | - `primary` - 主要な。 23 | - `secondary` - 補助的な・第二の。 24 | - `tertiary` - 第三の。 25 | - `quaternary` - 第四の。 26 | - `common` - 共通の。 27 | - `global` - 全体的な。 28 | - `local` - 局所的な。 29 | - `general` - 一般的な。 30 | 31 | ## 補足 32 | 33 | - `wrapper` - 内包する。 34 | - `wrap` - `wrapper`の略語。 35 | - `container` - `wrapper`の類語。容器・入れ物。 36 | - `group` - 集まり。 37 | - `area` - 特定の場所・範囲。 38 | - `brand` - ブランドの。 39 | - `site` - サイトの。 40 | - `emphasis` - 強調・重視。 41 | - `catch` - 興味を惹く・関心をつかむ。 42 | - `note` - 注釈。 43 | - `description` - 概要。 44 | - `desc` - `description`の略語。 45 | - `introduction` - 前置き・導入。 46 | - `intro` - `introduction`の略語。 47 | - `announce` - お知らせ。 48 | - `information` - 情報。 49 | - `info` - `information`の略語。 50 | - `action` - Call To Action。重要度の高い。 51 | - `success` - 成功。 52 | - `alert` - 注意・警戒。 53 | - `attention` - 配慮・気配り。 54 | - `error` - 間違い・失敗。 55 | - `caution` - 用心・警告。 56 | - `warning` - 警告・予告。 57 | - `danger` - 危険・驚異。 58 | - `more` - もっと多くの。 59 | - `feature` - 主要なもの。 60 | - `detail` - 詳細・細部。 61 | - `summary` - 概要・要約。 62 | 63 | ## コンテンツ 64 | 65 | - `about` - 〜について。 66 | - `work` - 仕事・任務。 67 | - `product` - 製品。 68 | - `service` - サービス。 69 | - `news` - お知らせ・近況。 70 | - `event` - 行事・出来事。 71 | - `history` - 歴史・沿革。 72 | - `archive` - 保存・保管・記録。 73 | - `concept` - 構想・概念・考え。 74 | - `recommend` - おすすめ・推奨。 75 | - `table of contents` - 目次。 76 | - `toc` - `Table of contents`の略語。 77 | - `index` - 索引・指標。 78 | - `contact` - 問い合わせ・連絡。 79 | - `inquiry` - 問い合わせ・質問・調査。 80 | - `access` - 交通手段。 81 | - `shop` - 店舗。 82 | - `related` - 関連のある。 83 | - `privacy` - 個人情報の利用・保護の方針。 84 | - `qanda` - Question and answer（質問と回答）の略。 85 | - `faq` - `qanda`の類語、Frequently asked questions（よくある質問）の略。 86 | 87 | ## レイアウトパターン 88 | 89 | - `wrapper` - 複数の要素を内包する。 90 | - `grid` - グリッドレイアウト。 91 | - `block` - 縦に積まれる。 92 | - `inline` - 横一列に並ぶ。 93 | - `media` - テキストと画像の横並び。 94 | - `flag` - テキストと画像の横並び（垂直方向の指定可能）。 95 | - `box` - 箱状の。 96 | - `card` - （主に）画像を目立たせるカード型。 97 | - `tile` - 繰り返しによって構成されるパターン。 98 | 99 | ## UI 100 | 101 | ### Text 102 | 103 | - `link` - アンカーテキスト。 104 | - `label` - 分類する・項目名。 105 | - `tag` - 符号・識別子。 106 | - `badge` - 残数を示す数値。 107 | - `copyright` - 著作権表示。 108 | - `dialog` - （主に）注意や警告を知らせるために使用されるメッセージで、ユーザーに操作を要求するのが特徴。 109 | - `toast` - `dialog`の類語で、`dialog`との違いは時間が経つと自動的に消えること。 110 | - `tooltip` - マウスオーバー時に補足情報を表示するインターフェイス。 111 | - `button` - オン・オフの選択に使うインターフェイス。 112 | - `btn` - `button`の略語。 113 | 114 | ### Image 115 | 116 | - `image` - 画像。 117 | - `img` - `image`の略語。 118 | - `icon` - 対象の内容や機能などを小さな絵柄で表したもの。 119 | - `loading` - 読み込み中であることを示すインターフェイス。 120 | - `logo` - 社名や製品名などを図案化・装飾化した文字・文字列。 121 | - `map` - 地図。 122 | - `chart` - 理解しやすいような方法で情報を示すリストやグラフのこと。 123 | - `graph` - `chart`の類語で視覚表現のための手段のこと。 124 | - `hero` - キービジュアルになる大型の画像。 125 | - `banner` - （主に宣伝用の）画像をともなうリンク。 126 | - `carousel` - 画像などのコンテンツを上下左右にスライドさせて切り替えるインターフェイス。 127 | - `slider` - `carousel`の類語。 128 | - `ticker` - `carousel`の類語で自動でアイテムを左右に流しながら表示する。ユーザーは基本的にコントロールできない。 129 | 130 | ### Navigation 131 | 132 | - `navigation` - 情報へ誘導するリンク。 133 | - `nav` - `navigation`の略語。 134 | - `breadcrumb` - パンくずリスト。トップページから現在ページまでの階層構造を示したリンク。 135 | - `topicpath` - `breadcrumb`の類語。 136 | - `springboard` - 同じサイズのリンクを2×2や3×3のように配置した同じ重要度を持つ並列なナビゲーション。 137 | - `cards` - トランプのような積み重なったカードのメタファーをもつインターフェイス。 138 | - `list-menu` - 縦に並んだリスト型のリンクで、階層構造をもったナビゲーション。 139 | - `dashboard` - グラフやステータスなどを一つの画面にまとめたインターフェイス。 140 | - `pagination` - 昇順にしたページ番号付きのナビゲーション。 141 | - `back-to-top` - ページトップに戻るためのページ内リンク。 142 | - `tabbar` - 書類などのインデックスタブを模した、別のドキュメントに切り替えるインターフェイス。 143 | - `segmented-control` - モバイルアプリケーションでは`tabbar`を画面全体の切り替えに使い、`segmented-control`は画面内の特定の表示領域の表示切り替えに使う。 144 | - `toolbar` - ユーザーが利用できるツールやアクションをまとめたインターフェイス。 145 | - `off-canvas` - 表示領域外から画面の大半を覆い隠したり（オーバーレイ）、ずらすようにスライドしながら表示するナビゲーション。 146 | - `side-drawer` - `off-canvas`の類語。drawerは「引き出し」の意味。 147 | - `toggle-menu` - 同一の操作で二つの状態を交互に切り換えるインターフェイスで、操作対象になるボタンを基準にナビゲーションを表示することが多い。 148 | - `scroll-tab` - 表示領域よりも横に長いナビゲーションで、左右にスクロールすることで非表示部分を見ることができるインターフェイス。 149 | - `sitemap` - サイト内のすべてのページへのリンクをリスト化したもの。 150 | - `sns` - ソーシャルネットワーキングサービス。 151 | 152 | ### Form 153 | 154 | - `form` - 送信フォーム。 155 | - `login` - ユーザー認証をするためのフォーム。 156 | - `signin` - `login`の類語。 157 | - `registration` - ユーザー登録をするためのフォーム。 158 | - `step-navigation` - 複数画面にわたるフォームの順序や、現在地を示したナビゲーション。 159 | - `cart` - 購入するアイテムを一時的に保存する画面。 160 | - `checkout` - 保存していたアイテムを購入する画面。 161 | - `search-box` - キーワード検索するためのフォームエリア。 162 | - `search-result` - 検索結果画面。 163 | 164 | ### etc. 165 | 166 | - `dropdown` - 複数の項目を表示して、1つの項目を選択するインターフェイス。 167 | - `pulldown` - `dropdown`の類語。 168 | - `accordion` - 折りたたまれたコンテンツを選択することで表示させるインターフェイス。 169 | - `comment` - 記事に対する反応。 170 | - `table` - テーブル・図表。 171 | - `timeline` - チャットや年表のように時系列に並べたリスト。 172 | 173 | ## Element 174 | 175 | - `inner` - 内側の。 176 | - `outer` - 外側の。 177 | - `body` - 主要部分。 178 | - `head` - 上部。 179 | - `foot` - 下部。 180 | - `heading` - 見出し・表題。 181 | - `title` - 表題・題名。 182 | - `lead` - 見出しの補足・記事の要約。 183 | - `list` - 一覧・表。 184 | - `menu` - 一覧・表。 185 | - `item` - （表やデータなどの）項目。 186 | - `unit` - 1つの単位・1セット。 187 | - `column` - 縦列。 188 | - `col` - `column`の略語。 189 | - `text` - 本文。 190 | - `caption` - 画像・図表の補足文。 191 | - `thumbnail` - 縮小した画像。 192 | - `thumb` - `thumbnail`の略語。 193 | - `avatar` - 人の顔を示す画像。 194 | - `feature` - 特徴を補足する画像。 195 | - `tel` - 電話番号。 196 | - `address` - 住所。 197 | - `date` - 日付。 198 | - `time` - 日時。 199 | - `category` - 分類・部類。 200 | - `cat` - `category`の略語。 201 | - `tag` - 識別子。 202 | - `next` - 次の。 203 | - `previous` - 前の。 204 | - `prev` - `previous`の略語。 205 | - `mask` - 覆い隠す。 206 | - `overlay` - かぶせる・上書きする。 207 | - `delimiter` - アイテムの範囲や境界線を示すインターフェイス。 208 | - `separator` - `delimiter`の類語で混ぜないように分離する目的で使います。 209 | - `divider` - `delimiter`の類語でグルーピングするように分割する目的で使います。 210 | 211 | ## Modifier 212 | 213 | - `tiny` - とても小さい。 214 | - `xs` - `tiny`の類語でExtra small（smallよりさらに小さい）こと。 215 | - `small` - 小さい。 216 | - `medium` - 中間。 217 | - `large` - 大きい。 218 | - `huge` - とても大きい。 219 | - `xl` - `huge`の類語でExtra large（特大・超大型）のこと。 220 | - `reverse` - 反転する。 221 | - `push` - 前方に押す。 222 | - `pull` - 自分の方に引く。 223 | - `offset` - 相殺する・埋めあわせる。 224 | - `left`- 左側の。 225 | - `center` - 真ん中。 226 | - `right` - 右側の。 227 | - `top` - 上部。 228 | - `middle` - 真ん中。 229 | - `bottom` - 下部。 230 | - `round` - 角丸。 231 | - `circle` - 円形。 232 | 233 | ## 状態 234 | 235 | - `show` - 見せる。 236 | - `hide` - 隠す。 237 | - `open` - 開く。 238 | - `close` - 閉じる。 239 | - `current` - 現在の。 240 | - `active` - 活動中・有効な。 241 | - `disabled` - 無効になっている。 242 | -------------------------------------------------------------------------------- /css-coding-rule.md: -------------------------------------------------------------------------------- 1 | # CSSコーディングルール 2 | ## ファイル・ディレクトリ構成 3 | ファイルの構成は[FLOCSS](https://github.com/hiloki/flocss)をベースにします。 4 | 5 | ``` 6 | root 7 | └── assets/ 8 | └── css/ 9 | ├── common.scss 10 | ├── foundation/ 11 | │   ├── base/ 12 | │   ├── function/ 13 | │   ├── mixin/ 14 | │   └── variable/ 15 | ├── layout/ 16 | └── object/ 17 | 　   ├── component/ 18 | 　   ├── project/ 19 | 　   ├── scope/ 20 | 　   └── utility/ 21 | ``` 22 | 23 | スタイルは基本的に`/assets/css/common.scss`で出力しますが、ページ特有のスタイルが多く出る場合は`css/pagename.scss`のようにページ専用のスタイルシートを作ることもできます。 24 | 25 | ``` 26 | root 27 | ├── assets/ 28 | │   └── css/ 29 | │   ├── common.scss 30 | │   ├── foundation/ 31 | │   │   ├── base/ 32 | │   │   ├── function/ 33 | │   │   ├── mixin/ 34 | │   │   └── variable/ 35 | │   ├── layout/ 36 | │ └── object/ 37 | │ 　  ├── component/ 38 | │ 　  ├── project/ 39 | │ 　  ├── scope/ 40 | │ 　  └── utility/ 41 | ├── css/ 42 | │   └── index.scss 43 | ├── index.html 44 | └── page/ 45 | ├── css/ 46 | │   └── index.scss 47 | └── index.html 48 | ``` 49 | 50 | 無理に1つのCSSとして管理するより、以下のようにHTMLから優先度が把握できるほうがスタイルの追加が容易になり、`common.css`の肥大化・複雑化を防ぐことができます。 51 | 52 | ```html 53 | 54 | 55 | ``` 56 | 57 | ### FLOCSSの基本 58 | FLOCSSはFoundation、Layout、Objectの3つのレイヤーとComponent、Project、Utilityの3つの子レイヤーから構成されます。 59 | 60 | #### 1. Foundation 61 | Foundationレイヤーでは`html`や`body`のような広範囲にわたるベーススタイル、`h2`や`ul`のような基本的なタイプセレクタのデフォルトスタイルを定義します。装飾的なスタイルは避けて、できる限り低詳細度に保ちます。idセレクタやclassセレクタは使用しません。 62 | 63 | Foundationレイヤーにはレイヤーを追加するため、normalize.cssやベーススタイルは`foundation/base`レイヤーに指定します。 64 | 65 | ```scss 66 | @import "foundation/base/_normalize"; 67 | @import "foundation/base/_base"; 68 | ``` 69 | 70 | #### 2. Layout 71 | Layoutレイヤーはヘッダーやフッターのような、ページを構成するコンテナブロックのスタイルを定義します。目安としてはワイヤーフレームに書かれるような大きな単位のブロックです。汎用性のあるグリッドシステムは次のObject/Componentレイヤーで定義します。 72 | 73 | 例えば、ヘッダーにあるロゴやグローバルナビゲーションのレイアウトの役割を持つといったことができます。グローバルナビゲーションやコピーライトのようなコンポーネントは、Object/Projectレイヤーで定義します。基本的にはclass属性を使用しますが、id属性を使用することもできます。 74 | 75 | プレフィックス（接頭辞）として`l-`をつけます。 76 | 77 | ```scss 78 | @import "layout/_header"; 79 | @import "layout/_footer"; 80 | @import "layout/_main"; 81 | ``` 82 | 83 | #### 3. Object 84 | Objectレイヤーはプロジェクトにおけるビジュアルパターンです。抽象度や詳細度、拡張性などによって、3つのレイヤーにわけられます。 85 | 86 | 1. Component（`c-`） 87 | 2. Project（`p-`） 88 | 3. Utility（`u-`） 89 | 90 | #### 3.1 Component 91 | Componentレイヤーは多くのプロジェクトで横断的に再利用のできるような、小さな単位のモジュール（機能）です。 92 | 93 | OOCSSの構造（structure）の機能を担うため、装飾的なスタイルをできるだけ含めないようにします。また、`width`や`margin`といったレイアウトに影響を与えるプロパティもできるだけ含めないようにします。 94 | 95 | プレフィックス（接頭辞）として`c-`をつけます。 96 | 97 | ```scss 98 | @import "object/component/_list-ordered"; 99 | @import "object/component/_media"; 100 | @import "object/component/_layout"; 101 | @import "object/component/_wrapper"; 102 | ``` 103 | 104 | #### 3.2 Project 105 | Projectレイヤーはプロジェクト固有のパターンで、複数のページで使い回せるようなコンポーネントです。具体的なスタイルを持つUI（ユーザーフェイス）で、追加されるコンポーネントのほとんどはこのレイヤーに置かれます。 106 | 107 | 構造的なパターンでも、（ボタンのように）装飾的に拡張されるのであればProjectレイヤーに置きます。 108 | 109 | もし、このレイヤーで同じパターンが3箇所で使われていたら、別のコンポーネント（構造部分だけのパターンならComponentレイヤー、それ以外ならProjectレイヤー）としてまとめられないか検討しましょう。 110 | 111 | プレフィックス（接頭辞）として`p-`をつけます。 112 | 113 | ```scss 114 | @import "object/project/_icon"; 115 | @import "object/project/_icon-extend"; 116 | @import "object/project/_label"; 117 | @import "object/project/_button"; 118 | @import "object/project/_heading-h2"; 119 | @import "object/project/_heading-h3"; 120 | ``` 121 | 122 | #### 3.4 Utility 123 | Utilityレイヤーはいわゆる汎用クラスで、ほとんどの場合は単一のスタイルをもっています。コンポーネント間の間隔を調整したり、BEMのModifierが増えすぎるのを防ぎます。 124 | 125 | 共通の構造を持っていないセクションごとの余白などは、BEMのBlockとModifierで拡張することが適切でない場合があります。 126 | そのようなモジュールは無理にBEMにせず、`.u-section`のようプレフィックスつけた汎用クラスを作ります。 127 | 128 | `.mb10`のような具体的な名前より`.mb-small`のような相対的な名前にしたり、pxよりもemや%で指定することを推奨します。確実にスタイルを適応させるために`!important`を使用します。 129 | 130 | プレフィックス（接頭辞）として`u-`をつけます。 131 | 132 | ```scss 133 | @import "object/utility/_text"; 134 | @import "object/utility/_align"; 135 | @import "object/utility/_display"; 136 | @import "object/utility/_sr-only"; 137 | @import "object/utility/_width"; 138 | @import "object/utility/_margin"; 139 | @import "object/utility/_section"; 140 | ``` 141 | 142 | ### 追加するレイヤー 143 | FLOCSSのファイル構成に5つのレイヤーを標準で追加します。 144 | 145 | #### 1.1 Variable 146 | プロジェクト全体で使われる変数を定義します。例えば以下のように、基本的な変数を定義する`global.scss`とブレイクポイント、色、font-familyを定義するファイルを分割すると見通しがよくなります。 147 | 148 | ```scss 149 | @import "foundation/variable/_global"; 150 | @import "foundation/variable/_breakpoint"; 151 | @import "foundation/variable/_font-family"; 152 | @import "foundation/variable/_color"; 153 | ``` 154 | 155 | Sass（scss記法）で変数を定義する場合は以下のことに気をつけます。 156 | 157 | - `!default`フラグを指定することで、先に読み込んだ変数が適応されるルールに統一します。 158 | - `$pn-`(Project name)のようにプレフィックスを付けることで名前の衝突を防ぎます。 159 | - ハイフン（`-`）とアンダースコア（`_`）は同一と見なされるので、注意して扱います。 160 | - 3箇所以上で使われる共通の値やプロジェクトに関わらず利用できる値だけを定義します。 161 | 162 | #### 1.2 Function 163 | Sassで使用できるfunctionを機能ごとに定義します。例えばpxをremに変換したり、PhotoShopのトラッキングをemに変換するfunctionなどです。 164 | `$pn-`(Project name)のようにプレフィックスを付けることで名前の衝突を防ぎます。 165 | 166 | ```scss 167 | @import "foundation/function/_em"; 168 | @import "foundation/function/_rem"; 169 | @import "foundation/function/_tracking"; 170 | ``` 171 | 172 | #### 1.3 Mixin 173 | Sassで使用できるmixinを機能ごとに定義します。例えばメディアクエリやclearfix、再利用できるオブジェクトのベーススタイルなどです。 174 | `$pn-`(Project name)のようにプレフィックスを付けることで名前の衝突を防ぎます。 175 | 176 | ```scss 177 | @import "foundation/mixin/_mq-up"; 178 | @import "foundation/mixin/_mq-down"; 179 | @import "foundation/mixin/_clearfix"; 180 | @import "foundation/mixin/_media"; 181 | ``` 182 | 183 | #### 1.4 Base 184 | normalize.cssや要素セレクタ・属性セレクタのデフォルトスタイルを指定します。 185 | 186 | ```scss 187 | @import "foundation/base/_normalize"; 188 | @import "foundation/base/_base"; 189 | ``` 190 | 191 | #### 3.3 Scope 192 | ComponentレイヤーやProjectレイヤーのようなコンポーネント単位ではなく、ページ内の小さな範囲（スコープ）でのスタイルを定義します。繰り返し使用しないページ特有のスタイルはPageレイヤーやHTMLファイルのある各ディレクトリに定義します。 193 | 194 | 例えばブログページのスタイルとして_blog.scssを作成します。このレイヤーでは`.s-blog p`のような要素セレクタとの結合子も使うこともできます。 195 | もし、このレイヤーで同じパターンが3箇所で使われていたら、ProjectレイヤーやUtilityレイヤーでまとめられないか検討しましょう。 196 | 197 | 直下の要素に一律の余白を指定するといった使い方をしてもいいでしょう。 198 | 199 | ```scss 200 | .s-block { 201 | > { 202 | section, address, 203 | // h1, h2, h3, h4, h5, h6, 204 | p, ul, ol, dl, 205 | pre, div, 206 | blockquote, figure, 207 | table, 208 | form, 209 | a { 210 | &:not(:last-child) { 211 | margin-bottom: 1.7rem; 212 | } 213 | } 214 | } 215 | } 216 | ``` 217 | 218 | プレフィックス（接頭辞）として`s-`をつけます。 219 | 220 | ```scss 221 | @import "object/scope/_element"; 222 | @import "object/scope/_block"; 223 | @import "object/scope/_blog"; 224 | ``` 225 | 226 | #### その他のレイヤー 227 | その他にもレイヤーを追加することもできます。 228 | 229 | - Page - ページ特有のスタイルやページ単位でObjectレイヤー内のスタイルを上書きする場合など 230 | - Theme - SMACSSのThemeモジュールに該当するテーマによる色の切り替えなど 231 | - QA/Test - Quality Assurance（品質保証）、もしくはテストのための一次的なスタイル 232 | 233 | レイヤーの追加は以下のリンクを参考にします。 234 | 235 | * [More Transparent UI Code with Namespaces](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/) 236 | * [Managing CSS Projects with ITCSS](http://csswizardry.net/talks/2014/11/itcss-dafed.pdf) 237 | 238 | #### モジュール化 239 | Layoutレイヤー以下のモジュールは機能ごとにファイルに分割します。モジュールは後述するBEMをベースに名前をつけ、モジュール名とファイル名は一致するようにします。 240 | 241 | - `.grid` => `_grid.scss` 242 | - `.button` => `_button.scss` 243 | 244 | #### モジュールの粒度 245 | モジュールを適切な粒度（受け持つ機能の大きさ）にするために、以下の3つの粒度でモジュールを分類し、小さなモジュールから読み込みます。 246 | 247 | 1. Content 248 | 1. Medium Container 249 | 1. Large Container 250 | 251 | ##### 1. Content 252 | 見出しやリスト、ボタンやアイコンなどのページの内容を表現する小さなオブジェクトです。 253 | 254 | ##### 2. Medium Container 255 | Contentを内包するオブジェクトで、Contentのスタイルを上書きすることができます。例えば、`.media`や`.button-group`のようなオブジェクトです。 256 | 257 | ##### 3. Large Container 258 | ContentやMedium Containerを内包するオブジェクトで、内包するオブジェクトに干渉することはできません。例えば、`.grid`や`.wrapper`のようなオブジェクトです。 259 | 260 | Large BlockはSmall BlockとMedium Blockを内包することができますが、スタイルを上書きすることはできません。 261 | 262 | #### レイヤーの順序 263 | カスケーディングを管理するため、レイヤーを読み込ませる順序は 264 | 265 | - 低詳細度から高詳細度 266 | - 抽象的なスタイルから具体的なスタイル 267 | - カスケーディングを許容するモジュールからカスケーディングを許容しないモジュール 268 | 269 | のようにする必要があります。例えば以下のような順番で読み込ませます。 270 | 271 | ```scss 272 | @import "foundation/"; 273 | @import "layout/"; 274 | @import "object/component/"; 275 | @import "object/project/"; 276 | @import "object/scope/"; 277 | @import "object/utility/"; 278 | @import "page/"; 279 | @import "theme/"; 280 | @import "qa/"; 281 | ``` 282 | 283 | #### 外部ライブラリのレイヤー 284 | JQueryのプラグイン、CSSフレームワークやライブラリを読み込ませる順序は「レイヤーの順序」で示した基準を使います。外部ライブラリであっても、役割や機能が変わることはないからです。 285 | 例えば、normalize.cssは`foundation/base/`、スライダーのようなJQueryプラグインは`object/project/`のMedium Containerが適切な位置になるでしょう。 286 | 287 | 外部ライブラリは基本的にファイルを直接上書きせず、`libraryname-extend.scss`のようなファイルを作成し、上書きをします。 288 | 289 | ## 命名規則 290 | 命名規則はBEM（MindBEMding）をベースとし、レイヤーごとにプレフィックスをつけることで名前空間とし、ブレイクポイントをもつモジュールにはサフィックス（接尾辞）をつけることで名前のブレを防ぎます。 291 | 292 | ### BEM（MindBEMding） 293 | [BEM](https://github.com/juno/bem-methodology-ja/blob/master/definitions.md)をベースにした[MindBEMding](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)を使用します。BEMには役割や関係性を明確にできるメリットがあります。 294 | 295 | BEMはBlock、Element、Modifierの3つの概念から構成され、以下のようなクラス名になります。 296 | 297 | ```scss 298 | .block-name {} 299 | .block-name__element {} 300 | .block-name--modifier-name {} 301 | .block-name__element--modifier-name {} 302 | ``` 303 | 304 | * 小文字の英単語とハイフン1つ（`-`）とハイフン2つ（`--`）、アンダースコア2つ（`__`）で構成されます 305 | * BlockとElementとModifierの単語はハイフン（`-`）でつなぎます 306 | * BlockとModifierはできるだけ2つ以上の単語を合わせてユニークな名前にします 307 | * ElementとModifierは1つの単語だけを使ってもかまいません 308 | * ElementとModifierはBlockの名前を受け継ぎます 309 | * BlockとElementはアンダースコア2つ（`__`）でつなぎます 310 | * BlockとModiferもしくはElementとModiferはハイフン2つ（`--`）でつなぎます 311 | 312 | 基本的にクラスセレクタ1つだけにスタイルを指定しますが、`.block--modifier`の指定でElementにもスタイルを指定したい場合にはクラスセレクタを2つ使って指定することもできます。ただし、直近の子要素に限定するなど、影響範囲をできるだけ狭くしておきます。 313 | 314 | ```scss 315 | // Good 316 | .block--modifier > .block__element {} 317 | 318 | // Bad 319 | .block--modifier .block__element {} 320 | ``` 321 | 322 | #### BEMの注意点 323 | Elementを入れ子にするときに`.block__element__element`のような名前にできるだけならないようにします。HTMLの構造を示すのではなく、Blockに対するElementとModifierの関係性を示します。 324 | 325 | ```scss 326 | // Good 327 | .block__element {} 328 | .block__child-element {} 329 | 330 | // Bad 331 | .block__element {} 332 | .block__element__element {} 333 | ``` 334 | 335 | OOCSSのようにマルチクラスで指定するのを基本とします。基本的にはBlockは独立して機能するようにしますが、汎用性を考慮したり、クラス名が長くなりすぎる場合には、Modifierだけでなく汎用クラスを組み合わせることもあります。 336 | 337 | ```html 338 | 339 |
340 |
341 |
342 |
343 | ``` 344 | 345 | Blockを親セレクタにしてElementとModifierを指定しません。スコープは命名規則によって擬似的に作ります。スタイルは柔軟に上書きができるように、詳細度をできるだけ弱くしておきます。 346 | 347 | ```scss 348 | // Good 349 | .block {} 350 | .block__element {} 351 | .block--modifier {} 352 | 353 | // Bad 354 | .block {} 355 | .block .block__element {} 356 | .block .block--modifier {} 357 | ``` 358 | 359 | Blockのスタイルを上書きするときに詳細度を変えないようにします。例えば、`.block1`のスタイルを変更するために`.block2`を親セレクタにして`.block1`を上書きするような指定はできるだけ避けます。同じ詳細度のセレクタであとから読み込ませることで上書きするようにします。 360 | 361 | ```scss 362 | // Good 363 | .block1 {} 364 | .block__element {} 365 | 366 | .block2 {} 367 | 368 | // Bad 369 | .block1 {} 370 | .block__element {} 371 | 372 | .block2 .block1 {} 373 | ``` 374 | 375 | FLOCSSにカスケーディングに関するルールを2つ追加しています。 376 | 377 | 1. 同じProjectレイヤーでもMedium BlockはSmall Blockのスタイルを一部上書きすることができます。 378 | 1. Scopeレイヤー、Themeレイヤー、QAレイヤーはそれまでのレイヤーを上書きすることができます。 379 | 380 | Sassの入れ子とアンパサンド（`&`）でBEMの記述を短縮することができますが、基本的に使わないようにします。1つ目の理由は入れ子のElementが増えると、今のアンパサンドがどこまでのElementとModifierを含んでいるのかを把握しにくくなるからです。 381 | 382 | ```scss 383 | // Bad 384 | .foo { 385 | color: white; 386 | &--bar { 387 | color: red; 388 | } 389 | & .bar { 390 | color: red; 391 | } 392 | } 393 | ``` 394 | 395 | 2つ目の理由は実際に指定しているセレクタ名で検索できなくなるからです。CSSにコンパイルされてはじめて`.block__element`のように生成されるので、Sass編集時に検索することができません。 396 | 397 | 入れ子を使うのは擬似要素やステートクラス、ブレイクポイントの挿入などに制限します。 398 | 399 | ```scss 400 | // Good 401 | .block { 402 | &:hover { 403 | color: blue; 404 | } 405 | &.is-active { 406 | color: blue; 407 | } 408 | @include _mq-up(md) { 409 | color: green; 410 | } 411 | } 412 | ``` 413 | 414 | 早く書けることも必要ですが、修正や運用がしやすいことのほうがずっと重要です。 415 | 416 | その他のBEMに関する注意点などは[BEM(MindBEMding)によるCSS設計](https://github.com/manabuyasuda/styleguide/blob/master/how-to-bem.md)を参照してください。 417 | 418 | ### プレフィックス（Prefix） 419 | レイヤーごとの役割を示したり、名前の重複をさせないために名前空間としてプレフィックスをつけます。FLOCSSで推奨されているプレフィックスといくつかのプレフィックスを使用します。 420 | 421 | - `l-` Layoutレイヤー 422 | - `c-` Componentレイヤー 423 | - `p-` Projectレイヤー 424 | - `u-` Utilityレイヤー 425 | - `t-` Themeレイアー 426 | - `s-` Scopeレイヤー 427 | - `qa-`, `te-` QA/Testレイヤー 428 | - `is-` クリックやマウスオーバーなどのイベントが発生している要素に付与する 429 | - `js-` JavaScriptから参照される要素 430 | - `cp-` あるHTML専用のCSSファイル（current pageの略称。名前を変更することもできます。） 431 | 432 | ### サフィックス（Suffix） 433 | ブレイクポイントを指定しているクラス名は`-sm`や`-md`のようなブレイクポイントのキーワードをクラス名の末尾につけます。 434 | ブレイクポイントはグローバル変数として定義しておき、そのキーをクラス名にも使うようにします。 435 | 436 | ```scss 437 | $_breakpoint-up: ( 438 | 'sm': 'screen and (min-width: 400px)', 439 | 'md': 'screen and (min-width: 768px)', 440 | 'lg': 'screen and (min-width: 1000px)', 441 | 'xl': 'screen and (min-width: 1200px)', 442 | ) !default; 443 | ``` 444 | 445 | ```scss 446 | @media (min-width: 400px) { 447 | .u-dn-sm { display: none; } 448 | } 449 | 450 | @media (min-width: 768px) { 451 | .u-dn-md { display: none; } 452 | } 453 | 454 | @media (min-width: 1000px) { 455 | .u-dn-lg { display: none; } 456 | } 457 | 458 | @media (min-width: 1200px) { 459 | .u-dn-xl { display: none; } 460 | } 461 | ``` 462 | 463 | メディアクエリは`min-width`を優先的に使い`-sm`などとします。`max-width`のパターンも作る場合は`-sm-down`などとします。 464 | 465 | ## コメント 466 | コメントにはコードだけでは理解できない（しにくい）情報を残します。例えば以下のようなものです。 467 | 468 | - 全体を見渡せるような目次 469 | - レイヤーやモジュールの区切りをわかりやすくするための見出し 470 | - なぜその実装方法を選んだのかという理由 471 | - コードの整理をしたい、バグを修正したいといった、コードからはわからない情報 472 | - コード自体の補足 473 | 474 | ### 目次（Table of Contents） 475 | スタイルシートのボリュームが一定以上になると全体の把握は難しくなります。CSSでもSassでも利用できる目次をスタイルシートのはじめに用意しておくことを推奨します。 476 | 477 | ```scss 478 | /** 479 | * VARIABLE 480 | * global...サイト全体に使用するサイズや数値に関する変数です。 481 | * breakpoint...メディアクエリで使用するブレイクポイントです。 482 | * font-family...font-family指定をまとめています。 483 | * color...グローバルに使用する色指定です。 484 | * 485 | * FUNCTION 486 | * em...pxをemに変換します。 487 | * rem...pxをremに変換します。 488 | * tracking...Photoshopのカーニングをemに変換します。 489 | * 490 | * MIXIN 491 | * mq-up...メディアクエリを`min-width`で挿入します。 492 | * mq-down...メディアクエリを`max-width`で挿入します。 493 | * responsive...レスポンシブ対応クラスを生成します。 494 | * on-event...:hover, :active, :focusをまとめて指定します。 495 | * clearfix...floatの解除をします。 496 | * sr-only...非表示にしてスクリーンリーダーにだけ読み上げさせます。 497 | * list-unstyled...list-unstyledオブジェクトのベーススタイルです。 498 | * list-mark...list-markオブジェクトのベーススタイルです。 499 | * media...mediaオブジェクトのベーススタイルです。 500 | * flag...flagオブジェクトのベーススタイルです。 501 | * ratio...ratioオブジェクトのベーススタイルです。 502 | * layout...layoutオブジェクトのベーススタイルです。 503 | * 504 | * BASE 505 | * normalize...Normalize.cssをインポートしています。 506 | * base...タイプセレクタと属性セレクタのデフォルトスタイルです。 507 | * 508 | * LAYOUT 509 | * header...``タグ直下にある`
`タグのスタイルです。 510 | * footer...``タグ直下にある`