CSSの設計で大事なことは
・用途がわかりやすい
・コピペで使い回しやすい
という２つのことがとても大事です。
最初にいただくデザインというのは大抵がそれだけで完結しません。
要素が増えたり、まったく別のデザインになったり、初期のデザインと完成時のデザインは全く別のものになる場合もあります。
そんなときに慌てないために、使いまわせる部品をつくるのです。
基本の部品をしっかり作ることで、バージョン違いの部品は簡単に作成することが可能になります。
そのために大事なことは、Webサイトに頻繁に使用する部品集をつくっておくことです。
CSS設計の参考リンクやキット
それぞれをまとめてみました。
スタイルガイドライン関連
▼質の高いスタイルガイドを作成するために考えておくべきこと
https://www.tam-tam.co.jp/tipsnote/html_css/post14750.html
▼デザインの参考に！デザインシステム / スタイルガイド10選
https://www.i3design.jp/in-pocket/5345
アドビXD関連
▼XDプラグインのデザインガイドライン
https://adobexdplatform.com/plugin-docs/design/
▼Adobe XD用の日本語ワイヤーフレームUIキット「Wires jp」提供
https://blogs.adobe.com/japan/web-adobe-xd-ui-kit-wires-jp/
▼最速でUI/UXスキルを磨くための
UIキット集
https://www.adobe.com/jp/products/xd/ui-design-kits.html
▼デザインと開発の連携を効率化！Adobe XD用Semantic UIキット開発の舞台裏 | アドビUX道場
https://blogs.adobe.com/japan/cc-web-semantic-ui-kit-xd-icons-templates-design-system/
▼Adobe XD Free UI Styleguide
https://www.behance.net/gallery/50809349/Adobe-XD-Freebie-UI-Style-Guide
▼Adobe XD おすすめ無料キット21選まとめ【UI/UXデザイナー必見】
https://goworkship.com/magazine/free-adobe-xd-ui/
Sketch関連
▼効率的なデザイン運用のために、Sketchガイドラインを作ってみた話（CrowdWorks DesignDiv）
https://note.com/designdiv/n/nebc5446718d7
▼「使いやすい＆運用しやすい」を目指したデザインシステムのSketch管理（Yahoo! JAPAN Tech Blog）
https://techblog.yahoo.co.jp/entry/20200414828256/
▼Sketchを使ったAtomic Designのワークフロー
https://uxmilk.jp/80160
▼sketchはスタイルガイドを作っておくとデザインが超絶楽になる
https://yososhi.com/archives/making-style-guide-by-sketch-and-make-design-easier/
レイヤースタイル ＞ テキストスタイル ＞ シンボル
▼Sketchでデザインしながらガイドラインを作ろう
https://note.com/czrkmsn/n/ndaa68d3f949e
命名規則：Namespace, Module, Component, ChildNode, variant
▼試し読み：『UIデザイナーのためのSketch入門&実践ガイド 改訂第2版』 デザイナー座談会
https://note.com/bnn_mag/n/nba2fd4d1c47f
▼「Sketchを用いたデザインシステム」を作ってチームでのデザイン作業を効率化した話
https://devblog.thebase.in/entry/2018/12/21/110000
▼エンジニアのための「Sketch入門！」 1時間コース
https://qiita.com/codomo_pro/items/663f17756d61aa8e8ea3
デザインガイドライン関連
▼Human Interface Guidelines（Apple）
https://developer.apple.com/design/human-interface-guidelines/
▼Material Design Guidelines（Google）
https://material.io/design/guidelines-overview
▼Fluent Design System（Microsoft）
https://nijibox.jp/blog/design_guidelines/
▼Spectrum（Adobe）
https://spectrum.adobe.com/
その他
▼UIデザイナーが知っておきたい海外の優れたデザインシステム17選
https://baigie.me/officialblog/2019/12/24/17-design-system/
▼【かんたん】デザインカンプの作り方、0から丁寧にわかりやすく図解します！
https://mogumogu-design.com/make-design-comprehensive/
▼デザインシステム と スタイルガイドライン 【まとめ】
https://dojo.codebot.io/design-system/index.html