タイトル通りの内容です。解決策は「HTMLコメントにMindBEMdingの文字列を含めない」とスマートではないのですが、以下に詳細を記述します。
※正確にはMindBEMdingですが、以降は”BEM”として記述します。
IE11でHTMLコメントにBEMを使うと警告される
IE11のHTMLコメントに、BEMに則ったクラス名やID名を含めると以下の警告メッセージが表示されてしまいます。
HTML1416: コメントの末尾が予期しない文字です。"-->" である必要があります。
原因はHTMLコメントにBEM命名規則の『Modifier』を使用していたことです。
<!-- .block-name--modifier-name -->
このように、BEMで付けたModifierクラス名をHTMLコメントに含めるとIE11で警告メッセージが表示されてしまいます。
今の所解決策はHTMLコメントにModifierを使用しないこと。
スマートではないのですが、以下の形で回避しました。
<!-- BlockもしくはElement名のみ -->
<!-- .block-name -->
<!-- BlockもしくはElement名の後に「Modifier: {modifier-name}」 -->
<!-- .block-name Modifier: modifier-name -->
警告が出る原因
警告が出てしまう原因ですが、どうやらMindBEMdingのModifier命名規則で使用するハイフン2つ(–)の記述列の時点で、IEにHTMLコメントの閉じタグと認識されてしまうようです。
IEの構文解析とMindBEMdingのModifier命名規則の相性が悪いので、どうしようもないと思い上記の解決策を取りました。
警告「HTML1416」は以下ページに載っております:
https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/hh180764(v=vs.85)