Help us understand the problem. What is going on with this article?

Ext.jsでのCSSの適用について、デザイナーができること

More than 1 year has passed since last update.

Ext.jsで作るプロダクトにCSSでデザインを施していく際に色々と考える必要があったので記事にします。

弊社ではここ1年くらいに開発しているプロダクトにExt.jsを採用する事が多く、社内でのナレッジはまだまだできていなかった所もあり、CSSの当て方について深く議論がされていませんでした。

デザイナーの私も、画像を作成しフロントのエンジニアさんにコーディングしていただいていましたので、実際に自身でCSSを書く時に色々とやり方がわからず不適切なやり方で乗り切っていた所がありました。

Ext.jsではclassを付けることが可能ですが、デザインの為のcssのclassは機能を作っている最中では不要です。
私自身も勉強不足だった所もあり、classの付け方がわからず、出力されたhtmlに書かれている、自動で吐くナンバリング付きclassに紐づけてcssを記述していました。

ng.png
[extが自動でナンバリングしたidにcssを当ててしまっていた。]

しかし、その方法ではコンポーネントを一つ追加しただけで、ナンバリングがずれ、その結果cssの適用範囲もずれてしまい、全体的に崩れるという事が頻発しました。

非常に非効率な所もあり、社内で検討した結果、エンジニアさんがある程度のコンポーネントを配置した状態でデザイナーに共有し、デザイナーが各コンポーネントにclsタグや、ulタグでclassやui名を付けて、そのまま見た目のコーディングまで行う形で進めました。

行ってみると、jsのコンポーネントにclsを追加するだけですので、htmlタグにclassを付けるのと同じ要領で簡単です。

cls.png
[clsを記述するだけでhtmlに反映されます。]

themer.png
[uiを記述すると、sencha themerで個別にコンポーネントのテーマを触る事ができます]

cssはSCSSファイルですので記述はSCSS記述で行うのが良いですが、通常のCSS記述でも問題ありません。
またExt.js用意されているテーマ変数を利用し記述する方法もあります。

Ext.jsは完全に自動的にhtmlを吐き出すので、制御が難しい所もありますが、クセを理解してしまえばデザイナーが見た目の部分を直接作っていくことはそこまで難易度の高い事ではないと感じました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away