「Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい」に識者たちの鋭すぎる突っ込みが入る
-
webbingstudio
- 9794
- 16
- 5
- 32
-
- いいね！32
ちゃちゃき
@chachaki
Atomic Designという方向性はいいかもしれないけど、中身の文章がわかりにくくて昨日マジギレしそうになった。 / 「Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい」 webbingstudio.com/weblog/webdesi…
2017-06-14 08:28:50
ちゃちゃき
@chachaki
主語を「私」から拡張しようとして大失敗してるので、責任逃れにみえる点。英語が苦手だろうが文系だろうが関係なく、「私がわからなかった」と書いてもらえないと、単なる太宰メソッド( d.hatena.ne.jp/keyword/%C2%C0… ) 。 webbingstudio.com/weblog/webdesi…
2017-06-14 08:31:48原文ははてなキーワードへのリンクですがトゥギャッターで読み込めないためこちらを参照ください
マークアップが自由にならない、CMSテーマ制作者の悩み
キタジマタカシ🐒Snow Monkey 開発者
@inc2734
僕は Atomic Design の考え方を CSS で使ってないけど、FLOCSS の段階で c か p か迷っているのにさらに切り方が増えたらもはや管理できんのでは…と思っているからで、最近はもういっそ全部 c （つまり細かく分類しない）ほうが良いのではないかとか考えてる
2017-06-14 10:47:57
キタジマタカシ🐒Snow Monkey 開発者
@inc2734
これはあるある！僕は WordPress ばっかりだけど、関数が直接 HTML はいちゃうところはフィルターや出力バッファリンク + 正規表現を駆使して無理やり FLOCSS にしてる…。でも全部はムリなので、そういうところは外側だけ囲ってある程度諦めながらやってる twitter.com/webbingstudio/…
2017-06-14 23:35:51
うぇびん(holyKurka)
@webbingstudio
皆さんの指摘の通り、全要素にクラス名を付けられない・あとで何が入るかわからないCMS案件で、かつデザイナーが私ではないと、厳密なAtomic Designの踏襲は無理かなあと思っています
2017-06-14 23:17:52
うぇびん(holyKurka)
@webbingstudio
@inc2734 私の配布テーマでも、本文などでは「.entry-contaier内でクラスを指定していないh2」みたいな書き方をしています。レンダリング遅くなりそうですが…
2017-06-14 23:51:07
キタジマタカシ🐒Snow Monkey 開発者
@inc2734
ただ、c > c とかにスタイルをあてたいときに .scss を読み込む順番を気にしないといけないとかはイヤなので、そういう意味では c と p をわけておくと責任の範囲をわけれるから良いかも
2017-06-14 10:57:16
キタジマタカシ🐒Snow Monkey 開発者
@inc2734
@webbingstudio コードみました！確かにこういう書き方もできるなと勉強になりましたφ(..) 僕はもうわりきって .entry-content > h2 としています。WYSIWYG で普通に書いた場合は基本囲まれないやろうという推定で…^^;
2017-06-15 00:29:29
うぇびん(holyKurka)
@webbingstudio
CSSフレームワークの件やっぱり同じこと考えてた人は多いようなので、 echoのデザインで作ってみたいけど、英語詳しい人早めに突っ込んでほしい…私が恥をかく前に…
2017-06-14 12:14:44
sunami hokuto
@shokuto
@webbingstudio Atomic Designのような大小関係で定義したいのであれば、objectとかpartsとか大きさを問わないような語は合わないんじゃないですかね。
2017-06-14 13:51:44
うぇびん(holyKurka)
@webbingstudio
@shokuto 英語が弱いのでますます悩みます…公開ディレクトリではないので01とか02にしたらだめですかね…
2017-06-14 16:03:08
うぇびん(holyKurka)
@webbingstudio
なんかもう「01_atoms」「02_molecules」「03_organisms」「04_templates」「99_utilities」でいいんじゃまいか
2017-06-14 16:07:04
うぇびん(holyKurka)
@webbingstudio
皆さんの指摘の通り、全要素にクラス名を付けられない・あとで何が入るかわからないCMS案件で、かつデザイナーが私ではないと、厳密なAtomic Designの踏襲は無理かなあと思っています
2017-06-14 23:17:52
(・∋・)
@ahomu
CSS フレームワークは、固有のコンポーネントデザインと密結合して統制された世界を築くか、しぬほど疎にしてどんなデタラメなデザインが来ても心の平穏が保たれる自由度の中で生きるかの2択って感じする。
2017-06-14 23:19:39
うぇびん(holyKurka)
@webbingstudio
@ahomu 本当は後者がいいので、この頃はbootstrapの使いやすそうなところだけ使っていたのですが、統制を取らないとコーディングの効率が悪くなる一方でして…
2017-06-14 23:21:22
(・∋・)
@ahomu
前者は各現場の努力（デザイン思想とコーディング設計のすり合わせ）が求められて結局ワンメイドになりがちだからハードルも生産性も高いが、後者は協業者との対話を諦めた分だけ時間は生まれる気もするので一長一短すね。誰と仕事をして誰を救って何を作るのか次第だ。
2017-06-14 23:26:04
うぇびん(holyKurka)
@webbingstudio
@ahomu はい…たまーにデザインからコーディングからCMS構築まですべてやることがあり、その場合は好きにできるのですが。
2017-06-14 23:57:08
(・∋・)
@ahomu
@webbingstudio コンポーネントの統制は、CSS フレームワーク側だけで頑張っても目の前のデザインを落とし込む分解能はそうそう得られないと思ってるので、みんなに使ってもらうということならデザインの考え方も CSS フレームワークの世界観に引きずり込む覚悟が必要だなーという気がしました。
2017-06-14 23:29:33
(・∋・)
@ahomu
しぬほど疎、というのは大量のユーティリティ/ヘルパーなクラスと、はき違えた DRY を CSS で実現できる Sass くらいパワフルなツールが合わさると実現しそうです。
2017-06-14 23:31:05
(・∋・)
@ahomu
だから FLOCSS やら BEM やら SMACSS やらもメソドロジーであってフレームワークではないのだと思います。確度の高いパターンを一般化して広めているが、使い込むのは各位だ。
2017-06-14 23:34:49
(・∋・)
@ahomu
Atomic Design で成功しているという話の何割かは、実態として Atomic Design で我慢しているに過ぎないという説はいかがでしょうか（？）
2017-06-14 23:44:11