Using CSS in SAP UI5

[pinakipatra]

Hi Experts,

I am using css (external ) with ui5 .
The structure of my page is like

Index(view>controller)------>index1--->view>Controller

                  index2--->view>Controller

                  index3--->view>Controller

Now should i create separate css for each index1,2,3... ??

I cannot use same css(link to index) for each because in css i am calling directly the ui5 class say:-

.sapMButton{

width : 90%;

}
so the button properties i want to apply only to the puttons present in the index ...not in index1,2,3
if i use same css page to all the index files it is changing all the buttons present in the all the pages ..
what is the best way to structure the css pages for that??

[RameshShrestha · Accepted solution]

Hi Pinaki,

Yes you can load same css file   to apply css by adding extra class manipulating the CSS with AND condition.

But anyway you have to right the separate combination for different pages.

For example you can have different id to the division of the index page.

Then you can write your css class such as

#myPageId.myButtons {

Your properties

}

This will apply the css to all the buttons with id myPageId and  class myButtons.

Note : No space between two selectors

What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space...

[Qualiture]

First of all, why are you having multiple index files? Normally, you would have only one single index.html file and have your views/controllers originate from there.

Nevertheless, you can have one single CSS file, and based on how you set up your classes/selectors, you can have CSS classes assigned to only certain controls.

For instance, you can use

  oButton.addStyleClass("myClass");

and in your CSS use:

  .myClass { /* etc */ }

or by ID of your control/element:

  var oButton = new sap.m.Button("myButton", { //etc });

and your CSS will then be:

  #myButton { /* etc */ }

[pinakipatra]

Hi Robin ,

Due to some of specific project requirement i am using 3 index files. Like you said each each index files of mine has multiple view & controllers.
For Example :-
My requirement is like under one index page (include all the views) each button should be green colored , in another index page all buttons should be red color and so on .....so instead of attaching  style-sheet to each and every control i changed the CSS properties of the  standard ui5 class.

Is there any consequence of doing that .....i guess this is a slight deviation from the sap best practices but this much deviation is fine  ..  .??

[Qualiture]

In your particular case, I guess this will be the best option; it indeed saves you from attaching extra style classes to each similar control.

The only drawback is you have to maintain multiple CSS files, but I suspect this is a small setback

[Former Member]

hello Pinaki,

its all your wish, how you can manage your CSS files, but the best practice is for each view, you can create respective CSS files in the folder structure. whenever you want to add the CSS properties in your view, user addStyleClass for that particular controls.

like testContainer.addStyleClass("CSS class name");

if you have similar controls(properties) in different views, the CSS's can be reused.

Regards,

Prasad Sistla.