CSS関連のメモ

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

• p59-78を参考

postcss/autoprefixer · GitHub

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

CSS Architecture — Philip Walton

• CSSの設計方針を書いたブログ記事。日本語訳は CSS Architecture | en.ja Article

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は--などで区切って書くようなルール。プロジェクトごとにどのような区切にするか決めるとよい

CSSプリプロセッサ

• Sass: Syntactically Awesome Style Sheets
  • Rubyで実装
• Getting started | Less.js
  • Node.jsで実装
• Stylus — expressive, robust, feature-rich CSS preprocessor
  • Node.jsで実装