CSSを書く際に必ず意識している

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

初の有料noteです。

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

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

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

反響に関しては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かもしれないが、ある程度練習を積んだ人が、そのコーディングルールに慣れたままだと厳しいものがある。業務におけるコーディングは作って終わりではない。作り終わった後の運用のことも考えてルールに則ったコードを書く必要がある。

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

コーディングの実務でも更新や改修といった「ディフェンス」の作業は避けられない。

実務で活かすためにコーディングの練習をしているのなら、「ただ形にするコードを書く」のではなく「ルールに則って後から更新や改修がしやすいコードを書く」ことが大切だと僕は思う。

また、コーディングルールというのは宗教論争的なものもあって、一概に正しいとか間違っているとか言えないのだが、僕自身はこれから紹介するコーディングルールに間違いは感じたことはないです。

以下、有料記事。

この続きをみるには

この続き:30,775文字

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

TAK / Web Creator.

500円

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

愛と平和

735
都内でWebデザイン&マークアップ&フロントエンドをしているWeb制作者。Webデザインやコーディングについて定期的に投稿しています。Twitterもフォローお願いします。Twitter → https://twitter.com/tak_dcxi

この記事が入っているマガジン

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。