今日お話すること

About me

• 名前：山元 彰也 (30歳)
• 職業：フリーランスエンジニア
  • ​Ruby、Rails、Vue.jsとか
  • スクールでコーチングとか
• ​最近勉強しだしたこと
  • ビジネスや経営学
  • ​子育てや教育
  • もちろんweb系の技術周りも！

Twitter Accounts

宣伝

Miyazaki.rb（仮）

Ruby、Railsのコミュニティをやる！！

もくもく会とかLTとかみんなでわいわいしたい！！

Milestone

• カオス化する理由

• Atomic Design

参考にした本の紹介

CSS設計完全ガイド

• CSS設計の本
• 500ページを超える
• 様々な設計手法
  • OOCSS、SMACSS、BEN、PRECSS
• 実践的なモジュールの例

カオス化する理由

CSSカオス化の原因

• すべてがグローバルスコープ
  • カスケーディング（滝）と言われる所以
• webのサービス化（複雑化）
  • 本来webは「データや文献を相互に繋げること」が目的
  • 現在ではwebを介して様々なサービスを受けることができる
    • ネットショップ、予約、メールの閲覧など
    • 「状態の管理」がよりCSSを複雑にする

Atomic Design

注意

Atomic Designは「CSS設計」を

念頭においていません！

なぜAtomic Designの話をするのか

• 実際にはCSS設計とも親和性がある

• 抽象思考が身につく

Atomic Designの概要

• Brad Frost氏が提唱したデザインシステムの方法論
  • デザインを構築・運用するための方法論
  • ​サイトURL：https://atomicdesign.bradfrost.com
• 5つの要素で考える
  • ​Atoms、Molecules、Organisms、Templates、Pages
  • このページがわかりやすい

Atomic DesignをCSS設計に使うと

• モジュールとレイアウトでstyleの定義を分けるとよい
  • (例).btnに直接、配置に関するstyleを書かない
• 再利用性や拡張性に耐えれるコードになる
  • (例).btnに色まで指定せず、.btn-redなどする。
    • Bootstrapが良い例