LightningのCSSは「追加CSS」と「CSSカスタマイズ」どっち?

LightningのCSSカスタム方法は2種類

追加CSS

外観 > カスタマイズ

STEP
1

追加CSS

STEP
2

画面左側にCSSを追加

STEP
3

ExUnit CSSカスタマイズ

ExUnit > CSSカスタマイズ

STEP
1

画面中央にCSSを追記

STEP
2

比較してみた

項目外観
追加CSS
ExUnit
CSSカスタマイズ
入力画面×
狭い
◎
広い
プレビュー◎
あり
×
なし
行番号の表示◎
あり
×
なし
検索機能◎
あり
×
なし
予測変換◎
あり
×
なし
ソースコード表記×
header内に記載
改行あり
▲
header内に記載
改行なし
サイト表示への影響◎
長いコードを記載しても
影響なし
×
長いコードを記載すると
重くなり、403になることもある

入力画面

外観
追加CSS

画面の1/3程度のサイズ編集する為、改行が多くなり見づらいが、プレビューしながら編集できるメリットもある。

ExUnit
CSSカスタマイズ

画面全体に編集画面が表示されるので編集しやすいが、
プレビューがないのはデメリットに感じる。

行の表示

外観
追加CSS

編集時に行番号(Line Number)が表示され、文字の色も変わる為、エディターに近い感覚で編集できる。

※スペースの表記がないため、全角スペースが入る入力トラブルが起こる。

ExUnit
CSSカスタマイズ

画面全体に編集画面が表示されるので編集しやすい