どのタグを使うか、どこにクラスをつけるか、クラス名をどうするか、CSSをどこに書くか、、、

コーディングをしている中で、一番無駄だと感じるのが「迷う時間」です。
規約をしっかり決めて、迷う時間を最小化しましょう。

以下のサイトの内容をベースに、自分なりにアレンジしたものをまとめました。
吉本式BEM設計（BEM設計ベース）

##HTML
###クラス付けの基準
クラスをつけないタグ、つけるタグをあらかじめ決めておきます。
####クラスをつけないタグ

インラインレベルの要素（a, span, img, em, strong, label, input...）
親要素がほぼ固定の要素（li, thead, tbody, tr, th, td, dt, dd）

####クラスをつけるタグ
その他全ての要素。
header, footer, main, section, article, aside, nav, div, h1~h6, p, figure, table, dl, ul, ol, ,iframe, form...
クラスをつけるか迷う時間をなくすために、スタイルを当てる必要がなくても必ずクラスをつけるルールにします。

またボタンなどあらゆる箇所で利用するパーツがある場合には、1つの要素に複数のクラスを指定します。

####Blockにするタグ
以下のタグ(div以外)は必ずBlockとして扱います。
header, footer, main, article, section, aside, div(elementでも使う)

####Elementにするタグ
上記以外全てのタグは、必ずElementとして扱います。
h, p, span, img, a, ul, ol, li, dl, dt, dd, figure, div(blockでも使う)

###クラス名
BlockまたはBlock__Elementの方式が基本です。
Modifierは、同じブロック内に複数の同一タグがあった場合に使用し、_nameなど_から始まる別のクラスを付与する形にします。
####Block
#####共通エリア
よく使うエリアは以下のように決め打ちで。そのサイト特有のエリアは頑張って考えましょう。

<header class="header"> <!-- サイトヘッダー -->
<footer class="footer"> <!-- サイトフッター -->
<nav class="gnav"> <!-- グローバルナビ -->
<main class="main"> <!-- メインコンテンツ -->
<nav class="fnav"> <!-- フッターナビ -->
<nav class="share"> <!-- シェアナビ -->
<nav class="paging"> <!-- ページング -->
<section class="sec"> <!-- セクション -->

#####ページ固有のエリア
ページを表す3文字 + その箇所を表す3文字
例）topctt
→ページごとにSassファイルを分割するので、その箇所を表す3文字は適当で良いです。

####Element
#####div,p以外
element名は常に固定。かぶった場合はmodifierを使う。

<h1〜h6 class="block__ttl">
<table class="block__table">
<ul class="block__list">
<ol class="block__list">
<dl class="block__def">
<form class="block__form">
<input class="block__input">
<label class="block__label">

#####p
以下のいずれかを使う。

<p class="block__txt"> <!-- テキスト系 -->
<p class="block__ttl"> <!-- タイトル系 -->
<p class="block__btn"> <!-- ボタン系 -->
<p class="block__logo"> <!-- ロゴ系 -->
<p class="block__data"> <!-- input系 -->

#####div
以下が使いやすいが、他でも良い。

<div class="block__inner">
<div class="block__outer">
<div class="block__wrap">
<div class="block__box">

###その他
blockの前後に1行空ける。

##Sass
Sassのディレクトリ構成は以下の通りです。

- scss
  └── style.scss
  └── bases
      └── _reset.scss
      └── _config.scss
      └── _base.scss
      └── _mixin.scss
  └── utilities
      └── _btn.scss
      └── _title.scss
      └── _form.scss
      └── _responsive.scss
  └── layouts
      └── _header.scss
      └── _gnav.scss
      └── _content.scss
      └── _fnav.scss
      └── _footer.scss
  └── pages
      └── _top.scss
      └── _abt.scss
      └── _ctt.scss
  └── pulgins
      └── _swiper.scss

###basesディレクトリ

_reset.scss：ブラウザのデフォルトのスタイルを解除します。
_base.scss：ベースとなるスタイルを、セレクタに直接指定します。（a{text-decoration: none;}など）
_config.scss：色、ブレイクポイント、フォント、画像パスなどを設定します。
_mixin.scss：メディアクエリなど、@includeして使うものを格納します。

###utilitiesディレクトリ
ボタン、タイトル、フォームなど、繰り返し使うパーツのスタイルを格納します。
_responsive.scssには、レスポンシブ対応のためにdisplayの値を切り替えるクラスなどを格納します。

###layoutsディレクトリ
ヘッダーやフッターなど、複数のページで繰り返し使用するエリアのスタイルを格納します。
エリアごとに1つのファイルを作ります。

###pagesディレクトリ
ページごとに1つのファイルを作り、ページ固有のスタイルを格納します。
ファイル名は_<ページを表す3文字>.scssに固定します。
例）_top.scss

###pluginsディレクトリ
画像スライダーなど、プラグイン固有のデザインを格納します。

##設計のメリット
クラス名が衝突する危険性が低い
→各ページ固有のスタイルを格納するファイルを分割し、ブロック名をファイル名 + 3文字に固定することでblock名の衝突に気がつくことができます。

クラス名を考えるのが楽
→block名を決め打ちorファイル名 + 3文字に固定。element名を固定。ファイルを分割したのでクラス自体にあまり意味がなくても良い。この3つによりクラス名に迷わなくなる。

クラスをつける基準が明確
→クラスをつけるタグ、つけないタグをあらかじめ決めておくことで、コーディングスピードのアップに繋がります。

コーディングに統一感が生まれる
→クラス名やクラスの付け方に一体感があること自体が1つの価値だと思います。

##設計のデメリット
HTMLの記述量が増える
→スタイルが必要無い要素にもクラスをつけ、さらに同じスタイルを使い回す場合にはマルチクラスになるので、クラスの量がかなり多くなります。