たわいもないことなんだけれどもついつい気になるんです。
CSSだけならclass属性先頭でもいいのですが、JavaScriptも書くのでid属性先頭が好きです。
しかし、お仕事はたくさんの人々とやります。世の中的にはどっちがいいのか気になりました。
class属性が先頭
属性の順序
HTMLの要素は可読性の向上のために、適切な順序で記述しよう。class
id, name
data-*
src, for, type, href, value
title, alt
aria-*, role
classは最も再利用されるコンポーネントなので最初にくる。idはより詳細で、最小限の使われ方（ページ内のブックマークとか）をするべきなので、二番目にくる。
id属性が先頭
今のところ以下のような順序が良さそうだと感じている。
id属性
class属性
style属性
他属性をアルファベット順で
WAI-ARIA（role属性とaria-属性）
data-属性
Microdata（item*属性）
id属性とclass属性を先頭にするのはCSSとの兼ね合いで、これらだけ知りたいというケースが多いからだ。使われることが多いclassが前の方が効率的だろうと思われるが、一意に確定されるidの強さを先頭にすることで表現したい。
[プログラマの人向け(?)]私が考えたHTML/CSS コーディング規約 - Qiita
属性の順序
以下の順序に沿って属性を記述していく
id属性
class属性
他属性
style属性
その他
よくある属性先頭
HTML での要素の属性の順番について皆様は何かこだわりなどはあり... - Yahoo!知恵袋
当たり前の属性ほど左にしてます。
例えば､
<div roll="" id="" class="">
気にしなくてOK
HTMLの書き方－HTMLの基本
複数の属性を指定する場合には、以下の例のように半角スペースで区切って記述します。属性を記述する順序は問われません。
<p id="sample" align="center">段落となります。</p>