CSS設計方法について

block, parts, structure, utility / かたまり、パーツ、構造、利用

SMACSS スマックス
カテゴリ分けして頭に識別用の文字をつける
・レイアウト(l-xxxx)ページの構造、関連性の低いブロック同士の区切り
・ブロック(b-xxxx)コンテンツとしてラベリングされるパーツの集まり
・パーツ(p-xxxx)アトミックまたはパーツの集合で中から小程度の部品
・アトミック(a-xxxx)最小の部品単位:ボタン(a-btn)
・ステータス(is-xxxx)状態を示す:(is-active, is-hidden,)
・ユーティリティ(u-xxxx)利便性のためのクラス
・ネーム(n-xxxx)個別指定のための名前、できればIDにする

CSS設計についての考え方
・知識、経験、考え方が違うと設計も違う。これを統一するのは難しい。
・統一しなくても運用に問題ない。
・いろいろな考え方が混在しているほうがいろいろわかる
・バラツキから担当者や実装時期がわかることがある
・一度決めたとしても、仕様や考え方も時間が経つと変化する
・他紙、他サイトを見てもそれぞれ仕様はバラバラで正解がない
・ルールを決める範囲と独自仕様でよい範囲をわける
・基本的なルール、曖昧な点だけ基準を設けておく
・構造と見た目のパターンを決めておく
・パーツは運用と汎用のバランスを考慮したうえでできるだけ大きな括りでパーツ化する
・フロント実装チームの共通認識を揃えるためのも
・LPなど一時的なページでは意識する必要ない、むしろ自由に新しい方法も試す

CSSフレームワーク
・独自の要件を反映しにくい
・使わない指定が多い
・デザインする際にCSSフレームワークを元にしていない
・全体像がつかめない、つかむには時間がかかる
・時間をかけずに均一なデザインを再現
・独自デザインには不向き
・PC-SPはテンプレート分けでレスポンシブではない

NG
・スタイルのプロパティ指定をクラス指定で代用するようなクラス名
例:class=”text-center”
フレームワーク:Tailwind CSS

参考フレームワーク
BULMA ブルマ

SMACSS スマックス
CSSを5つのカテゴリーに分類する
– Base – リセットCSSなど、サイト全体のスタイルを定義
– Layout – 位置に関する指定、頭に「l-」をつける
– Module – 再利用可能なパーツ、子要素の頭には親要素の名前をつける
– State – LayoutやModuleが変化した状態、頭に「is-」をつける
– Theme – 色などの見た目に関する指定、頭に「theme-」もしくは「t-」をつける
– 識別の名称

レイアウト(l-)
・セクション分け
・ヘッダー、フッター、コンテンツ、aside、
・カラム分け:1カラム、2カラム、、、
・ページ幅
・固定幅、全幅、、、

モジュール・パーツ(m-)
・タイトル、本文、記事リスト、パンくず、

種類(is-)
・選択、解除、フォーカス、、、

レイアウト
float, flex, center, left, right, width, height,

デザイン
border,color,font,background,

機能、見え方
scroll, overflow, hidden,

Page > Section > Block > Module > Parts

ページ:1画面の単位
セクション:ページの構成
ブロック:モジュールのかたまり
モジュール:部品の集まり
パーツ:部品
アトム:テキスト、線、など最小単位

技術面
・CSSカスタム変数:IE11未対応
・CSSスムーズスクロール:iOS未対応
・記述:適用範囲を限定する、子孫「 」(スペース)ではなく直下「>」
NG .hoge .piyo
OK .hoge > .piyo

デザインシステム

経営理念
デザイン概念
デザイン原則
・ガイドライン
・UXガイドライン
・デザインガイド
・デザインツール
・コンポーネントライブラリ
・スタイルガイド
・パターンライブラリ
・コーディングガイド
・トンマナガイド
・アニメーションガイド
・アトミックデザイン

デザインとコードの両方において一貫性があり、動的で、再利用可能で維持可能である

Classの命名方法
・大文字と小文字
・プレフィックスを付ける
・キャメル式
・バーで区切る、ハイフン、アンダーバー、1本2本
・短縮記号
・機械的な番号

HCDC:Human Centered Data Categorize
・制作者(人間)中心にコーディングを捉え、汎用性を意識した「分類」のこと
・block, parts, structure, utility

デザイン完成

分解

 構造 レイアウト

 部品 パーツ

 要素 エレメント

分類

 規則性 パターン

 再利用性 パターン化する粒度

 組み合わせた際の整合性

ルール決め

 使用する単語

 命名規則

 スタイル指定の方法

モック制作

 画像切り出し

 コーディング

 JSプログラム

CMS組み込み

 PHPプログラム

テスト

コメントを残す

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

CAPTCHA