デザインシステムを取り入れている企業、組織は多いと思います。
私は、エンジニアとして、日々デザインシステムを活用しており、その中で特に重要だと感じた点について書きます。
最低限これらを遵守することで、より良いデザインシステムの活用につながると思います。
デザインシステムの詳細については、以下の記事などを参考にしてみてください。
参考
デザインシステムとは？基本概念とその重要性 - ajike
組織ごとにデザインシステムは異なります。各組織のルールに従ってご利用ください。
1. ガイドラインを必ず読む
ガイドラインは、デザインルール、使用ルール、目的などがまとめられた重要なドキュメントです。コンポーネントの見た目だけでなく、機能や目的についても理解し、適切なコンポーネントを選択することで、ユーザビリティの向上に繋がります。
ガイドラインを読んでもわからない、記載されていない場合はデザイナーに確認しています。
2. コンポーネントを直接オーバーライドしない
デザインによっては、複数のコンポーネントを組み合わせて利用する必要がある場合もあります。
その際、デフォルトのスタイルを変更したい場合は、コンポーネントのクラスを直接オーバーライドするのではなく、別途クラスを作成するか、コンポーネントをdivなどで囲んでスタイルを適用します。CSSの詳細度を上げたり、!importantは使わないようにしています。
特に、コンポーネントの構造に関わるCSSのプロパティ（display、positionなど）は、直接変更しないようにしています。
これらのプロパティを直接変更すると、コンポーネントの再利用性が損なわれ、将来的なメンテナンス性が低下します。
構造に関わるようなCSSの一例
displaypositionfloat-
flex,grid
/* NG */
.button {
// 変更内容...
position: absolute;
right: 0;
}
// 詳細度をあげてオーバーライドするのもNGにしています。
.foo {
& .button {
// 変更内容...
position: absolute;
right: 0;
}
}
/* OK */
// クラス名を用意する
.bar {
// 変更内容...
position: absolute;
right: 0;
}
明らかにバグと判明していて、その認識がチームに共有されている場合は許可しています。
3. 他の役割を持たせない
クラス名、変数名に目的がわかるように命名するのは主流だと思います。
上記と似ていますが、その目的以外のスタイルを持たせるべきではありません。
/* NG */
// 例） paddingを調整するクラス
.pt-20 {
padding-top: 20px;
}
// 他の役割を持たせる
.foo {
& .pt-20 {
color: red;
padding-top: 20px;
}
}
4. Utilityクラスのみでコンポーネントを作らない
ユーティリティクラスは便利ですが、それ自体でコンポーネントを作るモノではありません。あくまでコンポーネントやレイアウトを調整するために使います。
ユーティリティクラスだけでコンポーネントを作らず、別途クラスを命名しプロジェクト用のコンポーネントとするようにしています。
まとめ
今回書いた内容は、実際にこのような使われ方をして問題が発生したケースを参考にしています。様々なバックグラウンドを持つメンバーと協力する中で、デザインシステムの利用について、より深く理解を深めることができました。
