僕がCSSを書く際に必ず意識している CSSのコーディングルール30条

2019年12月16日 14:14

初の有料noteです。

僕個人が厳守しているCSSコーディングのルールから、特に守っておいた方が良いと感じたものを「どうしてそれが良いのか・悪いのか」といった解説も含めて30点ほどピックアップしました。

文字数は全部で28,000字オーバーと卒論レベルですが、それだけコンテンツは詰まってます。価格は相場をよく知らないのでワンコインで買える500円にしました。

（※2019.12.22追記）こちらのnoteですが、リリースから一週間経たずして売り上げが1000部に届きました。皆様ありがとうございます。

先週リリースしたnoteが一週間経たずして売り上げ1000部突破いたしました。思いがけず大変なご好評をいただきまして、ありがとうございます。https://t.co/Pj1tOGTlh5 pic.twitter.com/xfP08jfF1p
— TAK (@tak_dcxi) December 22, 2019

反響に関してはTwitterのモーメントにてまとめましたので、こちらをご覧いただければ幸いです。

＜対象者＞
簡単なページをコーディングできる程度の方から、ある程度のコーディングに慣れている方

今回はCSSの基礎知識を学び、簡単なページをコーディングできるようになった方からコーディング中級者までを対象として書いています。

そのため、コーディング上級者だったり、CSS設計に精通されている方にとっては「なんだ、そんなことか」という内容かもしれません。

また、コーディング初学者の方にとっては敷居が高い内容が多く含まれています。そこはご了承ください。ただ、業務でコーディングに携わるのなら、将来的に気にしておくべきところだと思っています。現在は敷居が高くても、将来的にお役に立てれば。

一部SassなどのCSSメタ言語(CSSプリプロセッサ)の利用を前提としたものも含まれますが、まだ利用したことがない方はその個所を読み飛ばしていただいて構いません。

利用必須の箇所は【Sass利用】を見出しに付与しています。

＜今回はしない話＞
- CSSの基礎知識
- ガチガチなCSS設計法

基本的にこれから紹介するものは、CSS設計に大きく関連するものです。ただ、敷居が高くなるのでガチガチのCSS設計法(BEMやFLOCSSなど)の話は今回はあまりしません。ただ、コーディングルールはCSS設計における4つの定義を意識したものなので、そこについては解説します。

CSS初学者向けの基礎知識や、僕が実践しているCSS設計法については後日noteに投稿します。

# このnoteを書いたわけ

主にこの2つ。

- コードレビューを受ける機会が増えた
- 多くの教材がただ形にするだけのCSSを教えるものだから

1つめ。コードレビューを受ける機会が増えた。

Twitterで一応技術的なツイートをしているためか、コードレビューの依頼が多く来るようになった。

その時に(個人的に)重要視していることを、アウトプットも兼ねて共有することで、皆様のお役に立てればいいなと。

あと、先にネタバレしておくと「どうしてidにスタイルを指定しちゃいけないのですか？」といった、これから紹介するルールに関連する質問のDMがちょくちょく来るのだが、DM数がそこそこあったこともあり返答することができなかった。これから紹介するものはそのDMへの回答も含まれています。

2つめ。多くの教材がただ形にするだけのCSSを教えるものだったから。

基礎知識を身に着けて初めてコーディングをするって場合は「形にすればいい」「コードが汚くても見れればいい」というのはOKかもしれないが、ある程度練習を積んだ人が、そのコーディングルールに慣れたままだと厳しいものがある。業務におけるコーディングは作って終わりではない。作り終わった後の運用のことも考えてルールに則ったコードを書く必要がある。

スポーツで例えるなら、サッカーでも野球でもバスケでも、「オフェンス」の練習だけして「ディフェンス」の練習をしない選手っていないと思う。

初学者のハードルを高くするコメントかもしれないけど、コーディング練習でただ形にするだけでなく、作り終えて更新とかすることも考えてメンテナンス性のあるコーディングする努力も大切だと思うよ。サッカーでもバスケでもオフェンスの練習だけしてディフェンスの練習はしない選手なんていないでしょ
— TAK (@tak_dcxi) December 10, 2019