はじめに
JSCSS(JavaScript CSS)は、FLOCSSやSMACSSのコンセプト1を取り入れたCSS構成案だ。
TL; DR
JSCSSでは、JavaScriptの変数名や関数名として使うCSSの名前（ID変数のみ）にjs_*を使用する。
それ以外のCSSはl-*を使用してJavaScriptの変数名や関数名にCSSの名前を使わせないようにする。
なぜ"l-*"プレフィックスは使いにくいのか
JavaScriptのプログラムがl-*プレフィックスの-を引き算として解釈し、関数名や変数名が成立しないからだ。
"l-*"プレフィックスの失敗例
<div class="l-header">
<button id="l-header__button">
ボタン
</button>
</div>
<script>
function l-header__button_click() {
console.log('click');
}
l-header__button.addEventListener(
'click',
l-header__button_click
);
</script>
JavaScriptはプレフィックスの-を引き算として解釈し、関数l-header__button_clickとID変数l-header__buttonはエラーとなり成立しない 
"js_*"プレフィックスの成功例
<body>
<div class="l_header">
<button id="js_header__button">
ボタン
</button>
</div>
<script>
function js_header__button_click() {
console.log('click');
}
js_header__button.addEventListener(
'click',
js_header__button_click
);
</script>
</body>
関数js_header__button_clickとID変数js_header__buttonは成立し、一貫性がありエラーの起きにくいJavaScriptプログラムになった 
感想
プレフィックスを付けるのがいいと思ってFLOCSSとSMACSSを使ってみたらJavaScriptプログラムを書くとき使いにくかった。
どうしてl_*にしないのだろう 
感想のつづき
#idにスタイルをつけていたとき、同一ページ内に1個だけのときは問題がないが、方針が変わって他の要素にも#idと同じスタイルをつけたくなったとき問題が発生する。
スタイルを.classに変更すればいいが、#idの名前を変更するかしないかの選択に迫られる。
#idの名前を変更するとJavaScriptの修正が必要になってしまう。
JavaScriptの修正を避けたいといういうのが人情だ。
l-*の方式はJavaScriptの変数名や関数名としてCSSの名前を使用させないCSS構成案と考えられる。
そこにJSCSSの存在意義が生まれる。
JavaScriptの変数名や関数名としてCSSの名前を使用したい。2
「頭にjs-を付ける」のではなく、JSCSSでは「頭にjs_を付ける」。