CSS ユーティリティ タスクグループ

CSS ユーティリティ タスクグループの属性、目標、役割と責任についての詳細はこちら。

属性

プロパティ
作成日2024-02-20
目標終了日2025-01-31
終了日2024-09-24
Slack#tg_css_utils(社内からのみアクセス可能)
Google Docアジェンダドキュメント(社内からのみアクセス可能)

コンテキスト

フロントエンド部門は、CSS ユーティリティの記述、プロダクトでの使用、CSS バンドルのサイズ管理、ページが実際に必要なスタイル定義のみをインポートすることを確保するうえで、継続的な課題に直面しています。このタスクグループは、以下の推進要因を通じてこれらの課題を軽減することを目指しています:

  • CSS バンドルサイズの削減。
  • スタイル定義のコンパートメント化。
  • 一貫した、デザイントークン対応の CSS ユーティリティを通じた Pajamas 準拠の継続的な強制。
  • ダークテーマの準備状況の向上。
  • 開発者エクスペリエンス(DX)の改善。

終了基準

2024年9月の終了基準更新

2024年9月に、タスクグループの終了基準を再評価しました。この時点で、Tailwind CSS へのマイグレーションはほぼ完了しており、いくつかのクリーンアップタスクが残っているだけでした。目標を見直したところ、残りのスコープがタスクグループのような構造には大きすぎる可能性があることに気づきました。タスクグループは短期間で、明確に定義されたタスクを適切なタイミングで完了することに集中することを目的としています。記録のために、以下が元の終了基準です:

  1. CSS ユーティリティが Tailwind で生成される: https://docs.gitlab.com/ee/architecture/blueprints/tailwindcss/
    1. デザイントークンの使用を通じて Pajamas 仕様を厳格に適用する。
    2. カラーユーティリティがダークテーマのオーバーライドをサポートする。
    3. 必要なマイグレーションが完了している: https://gitlab.com/groups/gitlab-org/-/epics/12108
    4. 開発ガイドラインが CSS の記述方法における方向転換を反映するよう更新されている。
  2. ページ固有のスタイル定義が個別のバンドルに移動されている: https://gitlab.com/groups/gitlab-org/-/epics/3694
  3. CSS ルールが CSS ユーティリティに移行されている: https://gitlab.com/groups/gitlab-org/-/epics/8326
  4. カラー宣言が Pajamas 準拠のもののみを使用するよう統合されている: https://gitlab.com/groups/gitlab-org/-/epics/8599

再評価の結果として、以下を認識しています:

  • CSS ユーティリティから Tailwind CSS へのマイグレーションは完了しました。
  • 「ページ固有の CSS バンドル」と「CSS ルールから CSS ユーティリティへ」のイニシアチブは互いに矛盾しています。どちらか一方を他方のために断念する必要があります。
  • タスクグループとして、前述のイニシアチブに取り組む手段がありません。これらはフロントエンド部門が所有するか、これらに専念する新しいタスクグループを立ち上げる必要があります。
  • ただし、前進するうえで最善のアプローチについてのガイダンスを提供することはできます。これはドキュメントの更新を通じて行われました。
  • カラー宣言の統合に関しては、Tailwind CSS がメインプロジェクトで利用可能になったことで、この目標を達成するためのより良い立場に立てています。ただし、これも再びこのタスクグループのスコープ外です。スタイルをデザイントークンに移行するプロセスがまだ進行中であるため、このイニシアチブは今後デザインシステムグループが所有できます。

以上のすべてを踏まえ、更新された終了基準は次のとおりです:

  1. GitLab UI を使用するすべてのアクティブな GitLab プロジェクトで CSS ユーティリティが Tailwind で生成されている。
  2. 今後スタイルをどのように記述するかについてのガイダンスがドキュメント化されている。

2024年9月24日現在、これらの目標が達成されたため、タスクグループを解散します。

役割と責任

タスクグループの役割担当者職位
DRIPaul Gascou-Vaillancourtシニアフロントエンドエンジニア、Foundations::Personal Productivity
メンバーFlorie Guibertシニアフロントエンドエンジニア、Plan::Product Planning
メンバーJosé Iván Vargas Lópezシニアフロントエンドエンジニア、Verify::Pipeline Execution
メンバーPeter Hegmanシニアフロントエンドエンジニア、Data Stores::Tenant Scale
メンバーSavas Vedovaスタッフフロントエンドエンジニア、Govern::Threat Insights
メンバーVanessa Ottoシニアフロントエンドエンジニア、Foundations::Design System
メンバーLukas Eipertスタッフフロントエンドエンジニア、Foundations::Personal Productivity