search

csstalk / website

1 stars 0 forks source link

[add] 大枠のレイアウトとCSSの命名規則を作る #2

Closed manabuyasuda closed 7 years ago

manabuyasuda commented 7 years ago

全員でコーディングをしたときに、命名規則などのユレが出ないようにベースになるものを作る。 HTMLは構造が分かる程度でいい。対象はトップページとアーカイブページ。

manabuyasuda commented 7 years ago
  1. .a- Atomsは単体でも使用できるサイト共通の小さなコンポーネント。
  2. .m- MoculuesはAtomsを組み合わせたような比較的シンプルなコンポーネント。特定のコンテキストを持っていないことが多い。
  3. .o- OrganismsはAtomsとMoculuesを組み合わせたような比較的複雑なコンポーネント。特定のコンテキストを持っていて、1箇所でしか使わないものもある。
  4. .t- Templatesはすべてのページで使われるような共通部分のレイアウト。ワイヤーフレームのような大きな単位。
  5. .p- PagesはTemplatesのパターン違いや、ある状況にだけ表示するものなど。
manabuyasuda commented 7 years ago

トップページは使いまわさない前提なのでOrganismsでざっくり作っていけばいいのかなと思います。

レポートページはトップページと若干レイアウトが異なるので、Pagesでレイアウトを指定しています（FLOCSSのComponentっぽい感じ）。 ページ内のコンポーネントはMoluculesとOrganismsで作って使い回す想定です。

manabuyasuda commented 7 years ago

サイトの用途やデザイン的にコンポーネント化しにくいところがあったので、ECSSをベースにしたバージョンも作りました。

参考リンクです。

命名規則

命名規則はECSSのルールに沿っています。今のところvariantはありません。

namespace-Module_ChildNode-variant

ネームスペース

ネームスペースは省略せずに以下のようにしました。

.common-にはヘッダーやフッターのような共通部分、ワイヤーフレームのような大きなレイアウトが含まれます。あとはグリッドやボタンのベーススタイル（主に構造を持っていて見た目を含まない）を持たせることを想定しています。FLOCSSのComponentレイヤーやITCSSのObjectレイヤーと同じような考え方です。

manabuyasuda commented 7 years ago

ネームスペースを変更しました。

swnamespaceは計画的に管理する必要があります（ECSSでは共通化をできるだけ避けて分離することをテーマとしているので）。 現状ではボタンとグリッドのベーススタイルくらいかなと思っています。

manabuyasuda commented 7 years ago

ECSSについてまとめました。 個人的にはこのサイトはECSSで書いたほうがいいかなと思っているので、 ザッとでも見ておいていただけるといいかなと思います。

https://github.com/manabuyasuda/styleguide/blob/master/how-to-ecss.md

manabuyasuda commented 7 years ago

ミーティングにて、ECSSでコーディングすることが決まったので、_ecss.pugを残してmasterにマージします。 マージ後はディレクトリをECSS向けに修正します。CSSも一旦削除します（ベース以外）。

3 でディレクトリ構造の変更をします。