skillup

技術ブログ

デザイン

破綻しないCSSについて

投稿日:

業務では開発する人間があまりおらず、プログラム以外にもデザイン(CSSなどのレイアウト)やらサーバーやら一人ですべてやることが多いです。

CSSなんかは最初に触ってから4,5年は立ちますけど、系統的に学習したことがなかったり、詳細度すら最近知ったんでずいぶん回り道をしてたなと思いました。

最近ようやく気を遣うようになったので破綻しにくいCSSについて調べたことをちょっとまとめてみたいと思います。いきなりは難しいので、本当にざっくりとした重要なポイントのみ。

いきなり書く前に画面をみて共通部分を洗い出す

プログラムでいうとオブジェクト指向の思想に近いとは思いますけれども、画面と画面のどの部分が共通で統一できそうなど、書く前の設計の意識が大事かなあと思っています。

CSS設計をどうやって行うのかまとめてみた
http://qiita.com/soyanchu/items/8ca8876ced9f6db23d10

命名に注意

規則性を持たせ、命名規則だけで何を示しているかわかるようにする。

なるべくクラスに対してCSSを発行する

HTML要素に対して書いてしまうと保守性や再利用性が低下してしまうから。

idに書いてしまうと再利用性がほとんどなくなってしまうのであまりしないほうが良いようです。

抽象度に注意

抽象度の高いものはファイルの上(前半)に、抽象度が低く具体度の高いものは下(後半)におく。

  • 抽象度大 構造の根本にかかわるもの。寄せ、高さ、幅、余白
  • 抽象度小 色など

CSSの設計思想を学んでみる

以前のブログのエントリーにもかきましたが、OOCSSやBEMなどですね。プログラマにはOOCSSが良いのではと思います。

Object Oriented CSSを学んで綺麗なコードを書く
http://www.yoheim.net/blog.php?q=20141201

大まかな思想としては抽象度によるプロパティの振り分け方。

コードリーディング

他人のコードやオープンソースのコードなどをしっかり読んでみること。例えばbootstrapとかですね。

まとめ

知れば知るほどプログラムと共通する部分が多いですね。共通するというか要は「情報の構造化」という点でどちらも同じものなんだろうなあと思います。

-デザイン
-,

執筆者:


  1. […] 以前この記事で書いたんですけどね・・実務で納期が短くて焦ると忘れがち。 […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSを書くときのコツ

前回のCSSのルールを踏まえて、今回はCSSを書くときの概念的なルールです。 Contents1 CSSのデメリット1.1 抽象化が難しい1.2 すべてのルールがグローバルスコープ2 CSSを書くとき …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

no image

flexについて

CSSのflexをちょこちょこ使ってます。 以前下記リンクで超簡単なサンプルは動かしましたが、実践的なことは何もやっていませんでした。 css flexbxについてどんなことができるのか 使って思った …

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

デザイ二ングインターフェイスのまとめ

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ Contents1 ユーザーを理解する2 ユーザーの行動パターン3 ポジショニング(情報の配置) 4 …