業務では開発する人間があまりおらず、プログラム以外にもデザイン(CSSなどのレイアウト)やらサーバーやら一人ですべてやることが多いです。
CSSなんかは最初に触ってから4，5年は立ちますけど、系統的に学習したことがなかったり、詳細度すら最近知ったんでずいぶん回り道をしてたなと思いました。
最近ようやく気を遣うようになったので破綻しにくいCSSについて調べたことをちょっとまとめてみたいと思います。いきなりは難しいので、本当にざっくりとした重要なポイントのみ。
Contents
いきなり書く前に画面をみて共通部分を洗い出す
プログラムでいうとオブジェクト指向の思想に近いとは思いますけれども、画面と画面のどの部分が共通で統一できそうなど、書く前の設計の意識が大事かなあと思っています。
命名に注意
規則性を持たせ、命名規則だけで何を示しているかわかるようにする。
なるべくクラスに対してCSSを発行する
HTML要素に対して書いてしまうと保守性や再利用性が低下してしまうから。
idに書いてしまうと再利用性がほとんどなくなってしまうのであまりしないほうが良いようです。
抽象度に注意
抽象度の高いものはファイルの上(前半)に、抽象度が低く具体度の高いものは下(後半)におく。
- 抽象度大 構造の根本にかかわるもの。寄せ、高さ、幅、余白
- 抽象度小 色など
CSSの設計思想を学んでみる
以前のブログのエントリーにもかきましたが、OOCSSやBEMなどですね。プログラマにはOOCSSが良いのではと思います。
Object Oriented CSSを学んで綺麗なコードを書く
[CSS] Object Oriented CSSを学んで綺麗なコードを書く
大まかな思想としては抽象度によるプロパティの振り分け方。
コードリーディング
他人のコードやオープンソースのコードなどをしっかり読んでみること。例えばbootstrapとかですね。
まとめ
知れば知るほどプログラムと共通する部分が多いですね。共通するというか要は「情報の構造化」という点でどちらも同じものなんだろうなあと思います。
[…] 以前この記事で書いたんですけどね・・実務で納期が短くて焦ると忘れがち。 […]