CSS inline
884
Views
13
Comments
On our RadarOn our Radar
Frontend (App Interfaces)

As we know inline CSS creates performance problems in our applications.

One suggestion would be, a bit like in Trusted Advisor (image below), to be able to search for all inline CSS.

Just like in the container parameters (for example), when you have fields like Margin Top, or Align ... When you fill these parameters with values, what the page will generate in HTML is inline CSS.

The possibility of being able to search for this information would be a huge help.

Although the first point of this idea is being implemented in Trusted Advisor, not all customers have access to this platform.

Another alternative suggestion that I give you, will ServiceStudio be able to generate warnings when we have style inline. So you would not have to search.

Regards,

Nuno Miguel Verdasca


2014-02-07 17-02-43
Vasco Pessanha
Changed the category to
Frontend

In my opinion, this is the kind of idea that can help a lot to fix inline CSS and get a better performance of the applications, leaving customers more satisfied.


Regards,

Nuno Miguel

2016-04-21 20-09-55
J.
 
MVP

have fun with P11 then :(


I didn't understand your comment J. ?

Changed the status to
On our RadarOn our radar

Hi Nuno,

That sounds like a good idea and we'll keep it on our radar.

Thanks,

Tiago Simões

Hello everyone,

When will there be news on this topic?

Hi Nuno, 

The good news is that we have some initiatives that are aimed of helping users style applications in a way that is more maintainable (e.g. by promoting the usage of CSS variables and minimizing the need for custom CSS). We've recently also improved the style classes picker to work better and allow developers to find reusable classes faster. We'll also make global changes to application styles a lot more straightforward. Expect some more news about this soon.

From a performance perspective, in modern browsers, inline styles sometimes can be faster than classes. Of course style maintainability can be a big concern. 

Just to understand your concern a bit better, are you experiencing severe performance problems because of inline styles, or is it mostly the problem of maintainability and consistency in visual styles?

Thanks,
Tiago Simões


Hi Tiago,

Thank you very much for your response. The big problem always has to be with maintenance and consistency of styles. And with the possibility of service studio generating inline CSS warnings, it would be very productive when we are analyzing code, or doing maintenance, or any purpose to increase performance. As you can get this kind of information from the trusted advisor, and since this platform is not accessible to all customers, it would be good to have this kind of information mirrored in warnings.


Thanks,
Nuno Verdasca

Is there any news about this idea?

Hi Nuno,

We’ve recently released the new theme editor, that will make it obvious for anyone how to make the most common global changes to styles. This will guide people with less CSS knowledge to do changes in a more consistent way, and it will remove a lot the need of specific changes. Another step is that we’ll integrate trusted advisor in the Architecture Dashboard, which should be available for all customers. We also want to start using CSS variable in more places (e.g. styles editor).

We know this is not enough and we’ll continue working on this subject. It may not necessarily be with warnings, as we have observed that when we have categories of warnings that have too many false positives users tend to start ignoring all warnings, and no one wants that.

But improving the consistency and maintainability of styles is definitely something that we want to continue doing.

Cheers,

Tiago Simões 

Thank you very much James for the information and availability.


Best regards,

Nuno Verdasca

Hi all!

But I really appreciated that you collaborated in the discussion of the idea, sharing your opinion about the need for it, and that other topics related to the idea could contribute.

Thank you all for your support.

Hi,

it is definitely time consuming to see Inline CSS warnings on the AI Mentor under the app report, and then not being able to actually find them in the module. I am currently having such a problem. It keeps saying i have inline CSS in a certain screen but i went through it multiple times and can't find it anywhere.

This idea would help us, developers, hugely.

Looking forward to new updated on this topic.

Best regards,

Lourenco Matalonga