富山県立山町のホームページ制作会社　株式会社カポタスト

3.1記述箇所

原則CSSは外部ファイルに記述し、linkタグより読み込む。ただし軽微な修正に関してはhead要素内にstyleタグを設置して記述しても良い。
タグのsytle属性に直接記述する方法（インラインでの記述）は禁止とする。

3.2外部CSSからの読み込み

CSSから別のCSSを読み込む（import）は原則禁止とする。
これはimportを使用すると、ページに使用されているスタイルシートが分かりにくくなるため（保守性・可読性が低下するため）である。

3.3基本命名規則

原則セレクタ名（クラス名、ID名）にレイアウトを直接的に示す言葉を使用しない。
（レイアウトの変更の際にHTMLの修正も必要となってくるため）

3.4BEMを参考にした命名規則

セレクタ名の命名規則にはBEMという命名規則をベースに以下のルールを用いる。

• 基本的にIDはセレクタには利用しない。「詳細度が上がり、スタイルを上書きするのが難しくなる」、「ページ内に1つしか使用出来ないためCSSのモジュール化に向かない」などの理由による。
• 単語の区切りはハイフン（-）ではなくキャメルケースを用いる。＊ハイフンの役割は後述
• アンダーバーは1つの構造、もしくは要素の親子関係を表すために用いる。
• ハイフンは構造、もしくは要素の派生を表すために使用する。

3.5CSSハック

CSS解釈の違いを解消するために、特定のブラウザのバージョンにだけ適用させるCSSハックと呼ばれる手法については原則使用しない。
レガシーなブラウザに対してはJavaScriptによりクラス名を付加することで対応する。
IEの場合は条件つきコメントにて対応しても良い。

3.6要素セレクタについて

ノーマライズなど、各要素に一括してスタイルを適用する場合以外に要素をセレクタとしては原則使用しない。
要素は文章構造によって変わるものであり、その文章構造によってスタイルシートが影響を受けることを避けるためである。

3.7ブレークポイントについて

ブレークポイントは999pxと699pxの2箇所を基本とする。
これにより1000px以上でパソコン、700〜999pxでタブレット、699px以下でスマートフォンとしてレイアウトする。
なおレスポンシブサイトを構築する場合はリキッドレイアウトとし、可能な限りどのようなデバイス幅でも横スクロールバーが表示されない完全な可変レイアウトとする。