CSS設計で本当に難しいのは「ルールを理解すること」ではなく「ルール通りに自分でコードを書くこと」だと思います。 実際にコードを書いていると「あれ、ここってどうすればいいんだろう？」「こういう場合はどうすべき？」といったことが頻発し、結局よくわからないまま勘でゴリ押すということがよくあります。 本書はそんな人へ向けて、FLOCSSをベースにしつつオリジナル要素を加えてより体系的にまとめた設計「PDFLOCSS（ピーディーフロックス、Page Divided FLOCSS）」を紹介します。 「CSS設計のルールはなんとなくわかるけど、いざ自分でコードを書こうとすると手が止まってしまう」という人に読んでもらいたい一冊です。 （追記：おかげさまでCSS設計のドキュメントとして採用している制作会社様も増えているみたいです！ありがとうございます🙏）
CompassとScssでコーディングをするときに、当たり前のことですが、ある程度決め事を作っておかないと後で面倒なことになりますよね。 Sassが主流になってきたとはいえ、2015年ではまだ案件によってはCSSのみだったりと、導入されてない会社、導入しつつはあるけど社内で浸透していないケースも結構あると思います。 そんな時にコーディングする前に色々と決めておいたほうが後でメンテ楽だよ！的なことでまとめてみました。 複数人でコーディングするときのチェックリスト的な感じで使ってもらえると幸いです。 最初にチーム内で一読しておくと良いもの CSS Styleguide ほぼこれを守れば大丈夫！ってくらい細かくまとめられてます。 きっと参考にしている人も多いはず・・・！ 脱カオスなCSSのために実践している7つの事 最初にも書かれていますが、現状は何かの設計思想をもとにガイドラインを作成、決め事
※この記事は2017年4月7日に執筆された記事です。現在は仕様が異なる可能性があります。 Webの開発をやったことのある方なら誰しも、「CSSって結局どう書くのがベストなの？」という悩みを感じたことがあるでしょう。 一見簡単なCSSですが、一度書き始めるとそのあまりの自由さに、まるで大海原に放り出された赤子のような気分になってしまいますよね。 人生何事も、ある程度制約があったほうがやりやすいものです。 そんなわけで今日はCSSの設計について考えてみましょう。 目次 どんな設計があるの？ F、L、O、Uの4つに分けよう Foundation Layout Object Utility FLOU設計のメリットは？ レイアウトが劇的に楽 CSSの見通しが良くなる FLOUで書くときのポイントは？ まとめ どんな設計があるの？ CSS設計について調べてみると、OOCSSだとかSMACSSだとかFL
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに FLOCSSというCSS設計手法で実装をやっていく上で、唯一の悩みどころにcomponentとprojectの判別があります。私のチームでも悩み、チームメンバーがモヤモヤし、あとあとCSSも崩壊しそうだったので、一つの判別基準をつくることにしました。 FLOCSS とは 数あるCSS設計手法のひとつで、OOCSSやSMACSS、BEM、SuitCSSなどのメジャーな設計手法のいいとこどりをした国産の設計手法です。 https://github.com/hiloki/flocss CSSはデザイン通りの見た目を実現するために様々
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く