プログラミング

CSSの考え方とおすすめの本「リーダブルコード」

CSSを書くときのポイント

運用期間が長く、規模が大きくなることが予測されるWebサイト、アプリケーションのコードを管理するのは非常に難しいです。

Webサイトを中長期に渡り運用する中で、ページ数の増加やデザインの変更を進めるとバグが増えます。

それらを防ぐためには、自分だけにしか分からないコードを書くのではなく、誰にでもわかりやすいコードを書くことが重要です。

特にCSSは自由度が高いので、人によってセレクタやプロパティの使い方が変わってきます。CSS設計を行わないと保守性が低く、管理工数が増えてしまいます。より良いCSS設計として一般的には以下の4つが挙げられます。

  • 予測しやすい
  • 再利用しやすい
  • 保守しやすい
  • 拡張しやすい

どんな仕事や案件でも対応できるようにCSS設計をしっかりと理解しましょう。

CSS設計ルール

案件によってCSS設計のルールは異なりますが、よく利用するものを紹介します。

セレクタ

要素名

以下のように要素名に対してcssを書くと、全てのpタグに指定した装飾が適用されてしまいます。同様のタグで、部分的に異なる装飾を適用する際には、タグ全体に適用されているCSSを打ち消すために要素名に対して書いたcssを上書きする必要があります。その結果、コードが複雑になり、コード量も多くなってしまいます。リセットCSSや共通のCSSを記述する以外は要素名をセレクタに利用しないようにしましょう。

id

idは要素の装飾のために利用しない方が良いと言われています。使わない方が良い理由は以下の2つです。

  • 1ページに同じid名は1つだけしか使えず、再利用できない
  • classよりもidに書いたコードが優先されるのでclassとidを併用すると、優先度が複雑になる

ただaタグのリンクやJavaScriptで利用する際にはid名の方が便利なので、その際はidをつけると良いです

class

基本的にスタイルを当てる際のセレクタはclassに統一しましょう。例えば以下のような記述があるとします。HTML<div> <p>要素</p></div>CSSdiv p{ font-size: 16px; font-weight: bold;}これらのコードが開発の中でpタグではなくh3タグを使用することになった場合コードは以下のように変わります。HTML<div>    <h3>要素</h3></div>
CSSdiv h3{  font-size: 16px;  font-weight: bold;}しかし、あらかじめ次のようにclassを使った記述をしているとどうなるでしょうか。HTML<div class="title-wrap"> <h3 class="title">要素</h3></div>CSS.title{ font-size: 16px; font-weight: bold;}こちらのように記述していれば先ほどのようにHTMLを変更してもCSS側は基本的に変更する必要がなくなります。これらの理由から基本的にはセレクタにはclassを使用することが良いと言われています。

その名前を見ただけで何を表しているかが分かると保守性が高いコードといえます。

良い例contactsection-titlecontact__inner
悪い例otoiawasetitle3contactinnerハイフンとアンダーバーをしっかりと統一して書きましょう。この後の章で実際のCSS class命名規則を詳しく解説していきます。

インデントや改行

統一感のある書き方をすることは非常に大事です。下記の様にインデントや改行がバラバラの場合、統一感がなく読みづらいです。

おすすめ書籍

リーダブルコード

.contact{
margin: 0 auto;
background: none;
}
.footer{
height: 100%;
width: 100%;
background: #000000;
}
.footer-logo{
font-size: 20px;
font-weight: bold;
margin-left: 37%;
}

統一感のある下記のようにすると非常に読みやすくなります。

CSSの復習

・divはhtmlのみの使用、意味はないので何度使ってもok・id属性同じWebページ内でid属性の値が重複してはならない・class属性同じWebページ内で同じclass属性の値を何度でも用いることができる<div  class>何度使ってもok ,htmlとCSSは対応するよう記述しよう。印は見ながら確認しやすくする。 </div class>・htmlが　top→main→bottomというセクションがあった時にはcssも同じ順番に記述していくといい。/* —————top section———————*/.firstview{ height: 500px;}.first-img{ display: flex;}
/* —————main section———————*/.main-img{
CSSも可読性高くする為に改行、インデントはhtml同様に行う。h1 { background-color: #EEE; border: 1px solid #222; color: red;}
・インデントは半角スペース２が原則・CSSの記述順も特に決まりはないがわかりやすいのが良い・styleを当てる時は原則classを使う
.box { width: 400px; height: 200px; margin: 50px auto; background: red;}

-プログラミング