こんにちは！Webデザイナーのさいさいです。

大変どうでも良いことなんですが、わたしは1人で飲みに行くのが好きです。
そしてわたしが1人飲みしに行く楽しみの一つに人間観察ってのがあるんです。
「この人は出張っぽいなぁ〜」とか「この男女はカップルかな友達かな」とか
観察しながら色々想像をめぐらすのが結構楽しいです✌(‘ ω ‘)✌

Web制作のお仕事をしていると、他の人が書いたコードを見る機会が多々あると思いますが
わたしの場合、日頃そんなことしてるせいか、ついついコードの書き方から
「この人きっと男の人だ」とか「めっちゃ雑！絶対この人部屋汚い！」とかも想像しちゃいます。

もちろん大雑把なコード書く人の部屋が必ずしも汚いとは限らないと思いますが

美しいコードを書くこと=モラルとプライドの問題

だと思うんです。前にもどっかの記事で書いた気がする。へへへ。
モラルとプライドのある人は恐らく他人をイラつかせるコードは書かないし
恐らく部屋もキレイでしょう。恐らく。たぶん。わかんないけど。

今回は、自分が書いたコードで他人をイラつかせないようにしようというお話です。
ここ何年か注目を集めている「CSS設計」に焦点を当ててみます✌(‘ ω ‘)✌

 

「CSSを設計する」ということ

そもそもどうしてCSSを設計しなければならないのか、というベーシックなところから考えてみたいと思います。
大規模サイトのように複数人で作業をする場合、もしくはそうして出来上がったサイトを
改修したりメンテナンスしたりする時のあるあるをいくつか挙げてみます。

・1箇所直すと色んなところでスタイル崩壊
・同じパーツなのにクラス名が複数存在する
・「!important」で仁義なきスタイル上書き戦争
・そもそも書き始める前にコード理解するのに時間かかる

Webデザイナーなら1度と言わず2度も3度も経験あると思います。
そのたびイライラするし無駄な記述が増えてその結果また直しづらくなるという悪循環…。
しかも、関わる人が多ければ多いほど、時間がない時ほどこういうことって起こるんですよねぇ〜。

じゃあどうすれば防げるのか！
土台をきちんと作るということにつきるのではないでしょうか。
CSSは他の言語と比べると直感的だしエラーも出ないので簡単に書ける一方で
積み上げたものが壊れるのもあっという間という繊細なものだと意識する必要があります。

家を建てる時と同じで、土台がしっかりしていればその上に立派な家を建てても
月日が経ってリフォームすることになったとしても簡単に壊れたりしません。
丈夫でメンテナンスしやすいサイトを作る
そのために「CSSを設計する」という考え方が必要なのですね✌(‘ ω ‘)✌

 

CSS設計に求められるもの

では、実際どんなことに気をつけて設計すれば良いかということについて考えてみます。
CSS設計について書かれている記事で頻繁に紹介されているのがこちら↓

良いCSS設計のゴール
・予測しやすい
・再利用しやすい
・メンテナンスしやすい
・拡張しやすい
https://philipwalton.com/articles/css-architecture/

すごく抽象的な表現になってますが、例えば前項のあるある例にあてはめると
“予測しやすい”書き方をしていれば、1箇所直した際の影響範囲を最小限に留めることができますし
“再利用しやすい”書き方をしていれば、同じパーツに複数のクラスが存在することはないですし
“メンテナンスしやすい”書き方をしていれば、!important戦争は起きないですし
“拡張しやすい”書き方をしていれば、さっとコード見渡してすぐ書き始めることができます。

そしてこれは大規模サイトの時だけ意識すればいいというものではないです。
小規模だろうが1人で作業していようが、CSSを書く時には絶対に意識すべきです。
なぜなら！普段から意識していないといざ使うって時にすぐ使えないですよね？

それに…小規模でスタートしても、その後数十ページ集百ページのサイトになることもあるでしょうし
1人で全部構築したとしても、その後誰かの手に渡って改修・メンテナンスされることもあるでしょう。
一から構築の時点でしっかりとした設計に基づいたCSSを書いていれば、その後関わる誰かの負担を軽減できます。
それは全く知らない誰かかもしれないし、数週間後・数ヶ月後の自分かもしれないのです！キャー(((^-^)))

 

まとめ

案件や会社の体質によるところも大きいですが、制作期間の中にCSSを設計するための時間が
含まれることってほぼ無いと思います。

つまり、コーディングのために与えられた時間の中で設計と構築をしなければなりません。
普段から「良いCSS設計のゴール」を意識した書き方をしていれば
与えられた時間をより構築に割けることになります。

美しいコードを書くこと=モラルとプライドの問題
時間がないからとか、表示上は問題ないからとか、言い訳せずに！
常に美しいコードを書けるように、まずはすぐ言い訳考える癖から直そうと思いまーす！＼(^o^)／

 

 

『さいさいさん』のWebに関する他の記事もどうぞ！

【HTML5】articleとsectionを正しく使い分けよう！
https://adluckdesign.com/ad_blog/22391/

【初心者向け】もう知ったかぶりしないためのデザイナー用語 -Web編-
https://adluckdesign.com/ad_blog/23272/