はじめに
現在、Front-end Developer Specialist (OutSystems 11)の試験勉強をしている中で、OutSystemsのCSSの優先順位について公式ドキュメント（カスケーディングスタイルシート - CSS）を読んでいたところ、
「このスタイルってどれのことを指してて、ブラウザやServiceStudioではどう出力されるの？」
という疑問が湧きました。
自動生成されるスタイルシートも含まれるので、普段の開発ではあまり意識しない部分があったりします。
そこで、Service Studioの画面とブラウザの開発者ツール（DevTools）を使って、各スタイルの適用箇所と出力結果を実例付きで深掘りしてみました！
こちらは「OutSystemsで自動生成されるスタイルシートについて疑問に思ったことをService StudioとDevToolsで確かめてみた」のPart2です。長くなり過ぎたので分けました。
興味があればこちらもお願いします。
今回の対象のスタイルシートは「基本テーマを含むテーマスタイルシート（指定された場合）」です。
テーマスタイルシートはServiceStudioでは複数個所から編集できるので、どこで変更したらどこに追加されるかをまとめてみました。
試験ではそこまで具体的に深堀りされないかもしれないですが、イメージの助けになればいいなと思っています。
公式ドキュメントのスタイル適用順序
OutSystemsでは、以下の順序でスタイルが適用されます（後のものほど優先されます）
基本テーマを含むテーマスタイルシート（指定された場合）は3番目に適用されるスタイルシートですね。
- グリッドのContainerウィジェットのシステムスタイルシート
- ブロックスタイルシート
- 基本テーマを含むテーマスタイルシート（指定された場合）
- 画面またはメールスタイルシート
- グリッド設定がThemeプロパティに定義されているテーマエクストラスタイルシート
- スタイルエディタ使用時にService Studioによって生成されるスタイル
- Attributes または Extended Properties で定義したインラインスタイル
使用環境
- OutSystemsバージョン：11
- Service Studioバージョン：11.55.22
- ブラウザ：Google Chrome（DevTools使用）
- アプリ種別：Reactive Web App
基本テーマを含むテーマスタイルシート（指定された場合）
疑問:
テーマスタイルシートって結局何がどう出力されて生成されてるの？
結論:
- 以下に設定したThemeのスタイルシートが出力される。
- モジュールプロパティでDefault Themeに設定したTheme
- Default ThemeのThemeプロパティでBaseThemeに設定したThemeのスタイルシート
- モジュールプロパティでDefault Themeに設定したThemeのスタイルシート（DefaultTheme.css）はServiceStudioから編集する箇所によって追加される順番が異なる
- Theme Editorから設定を変更するとDefaultTheme.cssの先頭に追加される
- Style Sheet EditorのDefault Themeに追加したcssはDefaultTheme.cssの末尾に追加される
挙動を確認してみる:
-
Service Studioでの編集の仕方：
「テーマスタイルシート」はモジュールプロパティのDefault Themeに設定しているテーマのスタイルシートのことを指します。
デフォルトでアプリ名のテーマが生成され、DefaultThemeとして指定されています。
ですので今回は「DebugTest_EndUser.css」が「テーマスタイルシート」として生成されます。
「基本テーマ」はテーマのプロパティから設定することができます。
上記の設定をすることでStyle Sheet Editorで下記の三つのスタイルシートが表示されるようになります。
ちなみにDebugTest_EndUser(Theme Editor)はアプリ作成時にプライマリカラーなどを選択するので、デフォルトで表示されていますが、Theme EditorのReset all stylesボタンを押下すると、DebugTest_EndUser(Theme Editor)はStyle Sheet Editorで表示されなくなります。
- 読み込みタイミング：3番目
-
DevToolsでの出力例：
DevToolsのSourceタブから、生成されているスタイルシートを確認します。
赤枠で囲ったcssが今回の対象です。
ServiceStudioで表示されるスタイルシートは3つですが、生成されているスタイルシートは2つになっていますね。
DebugTest_EndUser.cssの中身を見てみると、DebugTest_EndUser(Theme Editor)の内容になっています。
DebugTest_EndUserにクラスを追加してみます。
DebugTest_EndUser.cssの末尾に追加されたことが確認できました。
Theme Editorからフォントの設定を変更してみます。
DebugTest_EndUser.cssの先頭にクラスが追加されたことが確認できました。
まとめ
今回はOutsystemsのテーマスタイルシートについて調べてみました。
フロントエンドについて勉強している方の勉強の参考になれば幸いです。