ココログ・ベーシックでは、CSSに手を入れることができるので、ついつい調子に乗って新しいセレクタを追加していると、いつの間にかCSSが膨大なものになってしまいます。
自分で書いたCSSなので、修正したい時にどこを見ればいいかは、大体見当がついているのですが、例えばテキストやリンクの色を一括して修正したいとか、フォントを一括して修正したいという場合には、あちらこちら探しまわらなくてはいけません。
CSSをもう少し使いやすく整理する方法はないものかと調べていたら、興味深いページを見つけました。
従来は、CSSをセレクタごとにグループしていましたが、これをプロパティごとにグループしてはどうかという、面白い提案です。既存のCSSをプロパティ別に自動整形してくれるフォームも用意されています。
しかし、完全にプロパティだけでグループしてしまうと、私には全体を把握するのが難しいように思えました。そこで、プロパティ別整理法を部分的に取り入れてみることにしました。
- color
- background-color
- font-family
- font-size
- font-weight
上記の5つのプロパティだけを抜き出して、CSSの最初のほうに記述してみました。
これでしばらく運用してみて、必要に応じてプロパティ単位で整理したほうがいいものがあれば、随時修正していこうと思います。
追記
プロパティ単位で整理していくと、同じプロパティを使っている複数のセレクタをまとめて記述できるので、CSSのスリム化につながることが分かりました。
また、プロパティの設定値が、あまり根拠もなく微妙に変えていた物を見直す機会にもなりました。例えば、line-heightの値は調べてみると5種類ぐらいあったのですが、これを3種類くらいにまとめることができました。
その整理方法を以前読んでちょっと真似してみようかなと思ったのですがすぐやめました。理由は大体同じです。
返信削除今、僕がよくやるのは
1. メディア(スクリーンとかプリンタとか読み上げとか)別にする。
2. メディア間で共有できるものは共有する。
です。
そうすると例えばプリンタでは色や背景画像は要らないから、二次元系のメディアの共有 CSS は配置や文字の大きさ、文字のスタイルの記述になって、スクリーンの CSS は色や背景色、枠のスタイルの記述になります。僕が書く程度の量の CSS だと結構、系統だって分類されるので重宝しています。
メディア別にCSSを分けるというのは、考えたこともありませんでした。
返信削除ココログにはテンプレート・ビルダーというものがあって、全体の幅や背景色、フォントサイズなどを選択肢から選んで設定することができるようになっています。このテンプレート・ビルダーで設定しきれない部分を、自分で作ったCSSで修正したり打ち消したりしているという状況です。
本当は全部CSSだけで設定できたほうが楽なんですけどね。