弊社は新規でWEBサイトを作成することがメインですが、たまに他社で作ったサイトを修正して欲しいとのご依頼をいただきます。
その際に一番苦労するのが該当のidやclassがどこで使っているのかわかりにくいCSSの修正です。
その他社製CSSを修正する際の愚痴や命名規則など、私が普段心がけていることを記事にします。
idとclassは意味のある文言にする
まず意味のある文言とは何か。
ヘッダーに使っているclassなのにfooterって普通に考えてもないですよね。
これは大げさな例ですが、誰が見ても、どこで使っているスタイルかをルール化できれば、後々自分で修正するにしても分かりやすくて良いんじゃないかなと思ってます。
ちょいちょい出くわすけど悲しくなるのでやめて欲しい
<section class="sec01">等のナンバリングしてるclass名やid名を付ける事。
最初にコードを書いている時は、上からとか下からとか優先順位とかでsec01とつけても、後々リニューアルを重ねた時に優先順位が変わったり、コードの場所が移動したりと、意味がなくなってしまうからです。
sec01 sec02と連番なのかと思ったら、sec03がなくてsec04いというのもあってがっくりすることも...（多分、不要になって消したのかな）
じゃあ「命名規則」ってどうするの？
社内でこういう時はこう命名すると言うルールがあるのであれば、それに従います。
従わないと、社内で自分以外の人が修正を加える時に大変なことになります。
特にルールが決まっていない場合は、まず最低限ひとつのサイトの中ではそのルールに則って命名します。
書いてる途中でコロコロ変わってたら、同じ機能なのに、class名が違うのがたくさん出てきたって事になりかねませんので、注意が必要です。
「コードはシンプルに短く」書いた方がWEBサイトの読み込み速度に影響を与えにくくなるので、出来るだけ短めにするのはお約束です。
命名規則の考え方
これはあくまでも私の中でのルールなので「考え方」の参考としてください。
独学で覚えたので、専門的に勉強された方だと「なんでやねん」なところがあるかと思いますので、そこはコメントなどで教えていただけると幸いです。
特定のコンテンツ
-
そのセクションのコンテンツ名を英語で
例／ある企業の情報掲載しているセクション<section class="information"> -
英語だとわからなくなるから日本語をアルファベットで
例／ある企業の情報掲載しているセクション<section class="kigyo-jyoho">
基本は「どこで使われているコードなのか」がid名とclass名を見ればすぐに分かる様にすることなので、特定のコンテンツに関連するセクションは、流用せず、そのコンテンツにのみ使うようにします。
HTMLで見た時も分かりやすくなるので、メンテナンス性もあがりますね。
同じ機能でもコンテンツが違う場合は
.infomation,
.howto {
と言った感じで,で区切ってると、コードも多くならずに手間もかかりません。
ここで注意したいのが、英語表記の時に、和製英語にするか正しい英語にするか。
今時は、優秀な翻訳ツールがあるので簡単に正しい英語にすることができるのですが、自分以外の人がメンテナンスすることを考えると、出来るだけ伝わりやすいclass名にしたい。さらに言うと、正しい英語にすると結構長い文になってしまってclass名としては使い勝手が悪いと言った状況になります。
そんな時は無理せず、informationをinfoとしたり、本来お問い合わせは英訳するとinquiryだけどcontactとかmailにしたりと言った配慮も必要かなと思います。
汎用性の高いdivやsection
-
サイトの大枠
例／wrapcontaineretc... -
コンテンツの大枠
例／contentarchiveetc... -
機能ごと（Flex）
例／横並びにして中央揃え＝flex-center、横並びにして左右余白はなしで均等＝flex-betweenetc... -
文字の色やサイズ替え
例／赤文字red、小さい文字smalletc...
※smallは昔のHTMLコードで使われていたタグですが、ここではclass="small"として使うことを想定しています。
パッと見て、何に使われるのか分かるので、いちいちcssファイルを開いて確認も必要ないですね。
私はstructureとして、汎用性の高いコードはひとまとめ（別ファイル）にして、サイトを構築する際にすぐに使えるようにしています。
まとめ
私の場合は、常に誰が見ても分かるコードを頭において書いています。
そうすることで後々、自分がメンテナンスする時にも迷わずに修正できるので、自分の為にもなるかと思います。
毎度のことですが、私は独学で覚えたので、なんとなくの感覚でやっているところがあります。
なので言語化ももやっとした表現しか出来なかったりすることが多々あります。
特に意味も考えずにルール化している部分もあるかも。
「これちゃうで～」って箇所あればコメントでご指摘いただけると幸いです。