CSS・HTMLの大文字・小文字の使い分けと区切り文字（ハイフンとかアンダースコアとか）
結論から
大文字・小文字の使い分け・・・全部小文字推奨
区切り文字・・・ハイフンだけ推奨（他の記号は使わない）
でもチームのルールが決まってるならそちらに従ってください。
順番に見ていきます。
大文字・小文字の区別
HTML、CSSどちらも大文字・小文字を使えますが
HTMLのマークアップ・・・区別されない（＊）
CSSのセレクターやプロパティ名・・・区別されない（＊）
（＊）ただし、HTML の属性 "id" や "class" の値、フォント名、URI の大文字・小文字、CSSカスタムプロパティの変数名などは区別されます
大文字・小文字の使い分け
CSSに大文字を一部使っているサイト様もありますし、
基本的にはサイトごとにルールが統一されていればどちらでも問題ないみたいです。
じゃあ1人でコーディングするときはどうしたらいいでしょうか？
わたしはGoogle様にすがることにします。
Google HTML/CSS Capitalization
すべてのコードは小文字でなければなりません。これは、HTML要素名、属性、属性値（text/CDATAを除く）、CSSセレクター、プロパティ、プロパティ値（文字列を除く）に適用されます。
ただし、<!DOCTYPE html>のDOCTYPEは大文字
alt属性の値は画像の代替テキスト（文字列）なので大文字や日本語でもOK
<!-- 非推奨 -->
<A HREF="/">Home</A>
<!-- 推奨 -->
<img src="google.png" alt="Google">/* 非推奨 */
color: #E5E5E5;
/* 推奨 */
color: #e5e5e5;IDとクラス名の区切り文字
ハイフン「-」とアンダースコア「_」が使われることが多いのでこの2つを比較します。
ハイフンは、複数単語を結合した意味
アンダースコアは、アンダースコア含め1つの単語として扱われる
そのため、エディターなどでクラス名をダブルクリックしたときに
ハイフンは、ハイフンで区切られた所まで選択される
アンダースコアは、アンダースコア含めすべて選択される
となります。他にも
ハイフンは、エディターなどで補完候補が区切られた単語毎に出る（一発で出ない）
ハイフンは、「属性セレクター[attr|=value]」が使える
など、一長一短で評価が分かれるようです。
Google様はというと
Google ID and Class Name Delimiters
IDやクラス名の単語はハイフンで区切ります。
セレクター内の単語や略語は、理解しやすくスキャンしやすくするために、ハイフン以外の文字で連結しないでください。
/* 非推奨: “demo” と “image”を区切っていない */
.demoimage {}
/* 非推奨: ハイフンではなくアンダースコアを使っている */
.error_status {}/* 推奨 */
#video-id {}
.ads-sample {}ということで、ハイフン推奨なようです。
ただJavaScriptなどではハイフンを使うとエラーになるため、
JavaScriptからは、クラスではなくカスタムデータ属性で要素を取得すると良いようです。