CSS設計を!このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。CSS設計を!CSS32016.01.02この記事は最終更新日から1年以上が経過しています。明けまして、おめでとうございます!なんか、慌ただしく2016年を迎えてしまった次第です。今年はちょっとゆっくりしたいなと思いつつ、2016年、今年もよろしくお願いいたします。mmさてはて、早速本題の方ですが、webデザイン界隈で最近、「マテリアル・デザイン」だの「アトミック・デザイン」など以前にも増して色々と聞くようになってきたのを肌で感じる今日この頃でして、デザイナーの方もそれらの思考を持ってデザインされるかと思います。「ORGANISMS」「TEMPLATES」を経て、ページが出来るのですよ。言っちゃうとこんな感じです。(ざっくり言いすぎました。)(詳しくはスライドorページを確認していただけると。-」で作成されてはいかがでしょうか。–CSSの設計や、組み方がよくわかんない。OOCSSやSMACCSやBEMと複雑でよくわかんない。等を思っている方は、ぜひ「APBCSS」をお勧めします。・汎用性を持った・再利用しやすい・メンテナンスしやすい・拡張性をもった・インタラクティブに扱えるといった特徴を持っています。ATOMS原子となるUIパーツをまずは定義しましょう。ボタンアイコンこれらのパーツには、「margin」や「float」などレイアウトプロパティを一切持たないようにしましょう。「margin」や「float」などレイアウトプロパティが、発生します。UIパーツが作成されます。そのアイコンに黄色のバージョンがあるのなら「.yellow」を付与しましょう。「.icon.github.yellow」このアイコンがタップされた状態なら「.icon.github.yellow.tapped」と、状態クラスを付与しましょう。「base」「pages」「parts」の3種類で区切ります。Baseディレクトリには、mixinや、resetなどを行うscssファイルを格納。UIパーツ、UIモジュールとなるstyleを格納。ディレクトリには、さすがにpartsのみでページは作成できないので、コントローラ名をIDとし、アクション名をclassとして名前空間を設け、ページ固有のレイアウトスタイルなどを設定していきましょう。常に原子と分子の考えを持ってCSSを作成していくことを推奨しているCSSアーキテクチャとなっております。CSSの設計や、組み方がよくわかんない。OOCSSやSMACCSやBEMと複雑でよくわかんない。ここ変えると、何処に影響いくかわからない。行き当たりばったりで作っていったらCSSが破綻した。-」を取り入れて設計してみてはいかがでしょうか。