読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

CSS関連のメモ

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

  • p59-78を参考

postcss/autoprefixer · GitHub

  • プレフィックスなしのCSSに、自動的に各種プレフィックスを付加するツール

CSS Architecture — Philip Walton

Home · stubbornella/oocss Wiki · GitHub

  • オブジェクト指向CSSについて
  • 情報を表示する場合でも、全種類の情報に共通するCSSと、情報の種類ごとに異なるCSSを分けて定義して、組み合わせて使えるようにする

Ja - Scalable and Modular Architecture for CSS

  • OOCSSをベースに作られたCSSガイドライン
  • Base/Layout/Module/State/Themaの5種類に分類
  • Base:デフォルトのスタイル
  • Layout:ヘッダやサイドバーなどの画面の配置の大枠や、再利用されるコンポーネントなど。.l-というプレフィックスをつける
  • Module:ボタンやテキストボックスなどの再利用可能な個別のパーツのスタイル
  • State:JavaScriptなどによって切り替わるスタイル。is-というプレフィックスをつける
  • 命名規約として、メッセージに関連するものは.messageから始め、種類は.message-warningなどのようにすることで名前が混乱することを防ぐ

BEM(Block Element Modifier)

  • JavaScriptなどにも適用される命名規約
  • まずはBlockを書き、それに続けてElementは-、Modifierは--などで区切って書くようなルール。プロジェクトごとにどのような区切にするか決めるとよい