QuiCSSとは
どのタグにクラスをつけるか、クラス名はどうするか、どこにスタイルを記述するか...
コーディングには迷う要素がたくさんあり、迷いこそが制作スピードのボトルネックになっています。
QuiCSS（クイックス）は、迷う時間を最小化し高速でコーディングをするために設計された、BEMベースのコーディング規約です。
背景
FLOCSS、SMACSSなどいくつかのコーディング規約を試してみたのですが、規約が緩すぎて結局自分で考えなければならない箇所が多かったり、逆に構成が複雑すぎたり、小~中規模案件では必要が無いほどディレクトリが細分化されていたりして、どれもしっくりきませんでした。
QuiCSSはシンプルな構成かつ厳格なルールを採用し、少ない学習コストでコーディングスピードを上げることができるように設計されています。
必要な前提知識
・HTML、CSSの基本文法
・Sassの文法及びパーシャルによるファイル分割
・命名規則「BEM」の概要
メリット
・どのタグにクラスをつけるかが明確
・HTMLとCSSを行ったり来たりする必要がなくなる
・クラス名がすぐに決まる
・クラス名が重複する可能性がほとんど無い
・CSSをどのファイルに書くべきかが明確
デメリット
・使っている人が少ない
・HTML内の記述量が多くなりがち（Emmetを使っていてある程度のタイピングスピードがあれば、文字を入力する時間は迷う時間と比べるとずっと少ないので、記述量の増加はスピード的には問題になりません。）
内容
ディレクトリ構成
- index.html
- img/
- js/
- css/
- scss
└── style.scss
└── bases
└── _reset.scss
└── _config.scss
└── _base.scss
└── _mixin.scss
└── _responsive.scss
└── _utility.scss
└── components
└── _btn.scss
└── _title.scss
└── _form.scss
└── _paging.scss
└── layouts
└── _header.scss
└── _gnav.scss
└── _main.scss
└── _fnav.scss
└── _footer.scss
└── pages
└── _idx.scss
└── _abt.scss
└── _ctt.scss
└── pulgins
└── _swiper.scss
basesディレクトリ
_reset.scss：ブラウザのデフォルトのスタイルをリセットするCSSを保存します。
_config.scss：カラーコード、ブレイクポイントなどを保存します。
_base.scss：タグに対して直接指定するスタイルを保存します。
_mixin.scss：メディアクエリなど、mixinを保存します。
_responsive.scss：レスポンシブ対応の際に使うクラスを保存します。(display: none;のつけ外しなど）
_utilities.scss：汎用クラスを使う場合には、このファイルに保存します。
その他、bootstrapなどのcssフレームワークの書き換えを行いたい場合には、適宜このディレクトリにファイルを追加してください。
componentsディレクトリ
ボタンやフォームなど、繰り返し使うパーツを1パーツ1ファイルで保存します。
作成したパーツを随時自分のテンプレートに追加して他の案件で流用することで、コーディングスピードをどんどんと上げていくことができます。
また他の案件でも(カスタマイズして)再利用できそうなパーツ以外は、無理に共通化せずにpagesディレクトリ内に繰り返し書いていくスタイルにした方が、結果として迷う時間が減ってコーディングスピードが上がります。
DRY(Don't Repeat Yourself)の原則は、ことCSSに関してはあまりストイックにならない方が良いと思っている派です。3、4回登場するくらいのスタイルの共通化で期待できる保守性の向上なんて、それによって必要になる思考量の増加と比べればたかが知れてます。
layoutsディレクトリ
ヘッダーやフッターなど、ほとんどのページで繰り返し使うエリアに関する記述を、1Block1ファイルで保存します。
pagesディレクトリ
各ページ固有のスタイルを1ページ1ファイルで保存します。
ファイル名は必ずアルファベット3文字にしてください。（後述するクラスの命名規則に関係します。）
pluginsディレクトリ
プラグイン固有のCSSがある場合、このディレクトリに保存します。
クラスの命名規則
クラスの命名はBEMがベースです。
Block：block
Element：block__element
Modifier：-modifier
が基本形となります。。Modifierはマルチクラス方式を採用しました。
その他、詳細なルールを以下に記載します。
layoutsディレクトリに保存するスタイルのBlock名は固定
layoutsディレクトリに保存するBlockは、どの案件も大体同じものになります。
以下のようにBlock名を固定しましょう。
もし以下にないlayoutが必要になった場合には、その都度Block名を考えます。
<header class="header"> <!-- ヘッダー -->
<nav class="gnav"> <!-- グローバルナビ -->
<main class="main"> <!-- メインコンテンツ -->
<footer class="footer"> <!-- フッター -->
<nav class="fnav"> <!-- フッターナビ -->
pagesディレクトリ内のBlock名はファイル名の3文字 + その箇所を表す3文字
例えばindex.htmlに対するスタイルをscss/pages/_idx.scssに保存した場合、ブロック名はidxtopやidxcttなどになります。
同じ名前のファイルを複数保存することはできないため、このルールによりクラス名が衝突する可能性はほぼ無くなります。
なお、ページごとにファイルを分割しているので、その箇所を表す3文字はある程度適当でOKです。（適当な名前でもどのスタイルを指しているかすぐに分かる）
element名はタグごとに固定する
div、p以外のタグ
完全に1つに固定します。同じブロック内に複数の同一タグがあった場合には、modifierを使いましょう。
<h1〜h6 class="block__ttl">
<form class="block__form">
<table class="block__table">
<ul class="block__list">
<ol class="block__list">
<dl class="block__def">
div、p
用途が多すぎで1つに固定するのは難しいですが、以下のいずれかが使えるケースが多いです。
それっぽければなんでも良いのですが、よく使うものを固定化して、悩む時間を少なくすることが大切です。
<p class="block__txt"> <!-- テキスト系 -->
<p class="block__ttl"> <!-- タイトル系 -->
<p class="block__btn"> <!-- ボタン系 -->
<p class="block__logo"> <!-- ロゴ系 -->
<div class="block__group"> <!-- フォーム要素系 -->
<div class="block__inner">
<div class="block__outer">
<div class="block__wrap">
<div class="block__box">
<div class="block__container">
クラスをつけるタグ、つけないタグ
クラスをつけるタグとつけないタグをあらかじめ決めておくことで、クラスをつけるかどうか迷う時間を無くします。またHTMLを一気に書き上げてからCSSを当てていくことができるようになるという意味でもスピードアップに貢献します。
クラスをつけるタグ
・大半のブロックレベルのタグ
header, footer, main, section, article, aside, nav, div, h1~h6, p, table, dl, ul, ol, ,iframe, form...
スタイルを当てる必要があるかどうかに関わらず、上記のタグには必ずクラスを指定します。
クラスをつけないタグ
・インラインレベルのタグ
a, span, img, em, strong, label, input, time...
・親要素が(ほぼ)決まっているタグ
li, thead, tbody, tr, th, td, dt, dd
上記のタグにはクラスをつけず、Sassのネストでスタイルを指定します。
Blockにするタグ、Elementにするタグ
BlockにするかElementにするかも、タグレベルで固定します。
Blockにするタグ
header, footer, main, article, section, aside
BlockにもElementにもなり得るタグ
div
Elementにするタグ
クラス付け対象の、その他全てのタグ
h1~6, p, ul, ol, dl, form, table, iframe...
componentsを利用する場合のクラスの付け方
上記のルールで付与した各クラスの前にcomponents用のクラスを追加します。
<div class="idxtop">
<h2 class="title idxtop__ttl">ページタイトル</h2>
</div>
サンプル
サンプルをGitHubおよびGitHub Pagesに公開しました。
不明点等ございましたらお気軽にご質問ください。