Unanswered

Power Pages CSS complexity

(4) Share

Report

Posted on by Jady

147

Hi all,
Rhetorical question: why is the CSS in the latest Bootstrap 5 Power Pages templates so complex? It ignores the old coding principle DRY (don't repeat yourself). CSS works through the cascade and specificity, but there are so many layers of CSS that it's a headache to customize these Power Pages sites.

Bootstrap 5 is a great UI framework, yet Power Pages still ships with theme.css that overrides much of the Bootstrap 5 CSS, and then Portalbasictheme.css overrides those styles, and finally they include Preform.BootstrapV5.bundle.css which also overrides the styling of many elements again. Why do they do this?

Couldn't Bootstrap 5 CSS provide base styling without so many overrides? All the Style Editor should do is modify colors, but instead it does a poor job of styling a handful of other selectors including fonts, buttons and tables. Theme.css should only modify the Power Pages elements not included in Bootstrap 5. It contains errors and incomplete attributes.

It's disappointing. CSS feels like an afterthought by the Power Pages team. I was hoping for a quality implementation of Bootstrap 5, but what we have is a band-aid patch. I hope eventually they refactor the entire implementation. In the meantime it's a time-consuming headache to customize Power Pages.

Cheers, Jady

Categories:

Customize & extend

I have the same question (0)

All responses (3)

Answers (0)

Christian Leverenz 1,214 on at

Like (1)

Report

Hi Jady,

thanks for that post. I am more a backend developer and always thought i completely got the whole stuff wrong. But it seems that you have the same questions as me :-)

Have fun,

Christian

Was this reply helpful? Yes No
GWham 58 Moderator on at

Like (2)

Report

I agree, and find you spend most of your time overwriting styles created in theme stylesheets.

Was this reply helpful? Yes No
aofosu 105 on at

Like (1)

Report

We are developing with a blank template for our client, who must adhere to a strict "look & feel" ecosystem specific to their organization. We encountered similar issues with having to override much of the CSS in theme.css and portalbasetheme.css. To address this, the client provided their own CSS library. To minimize overrides, we disabled the theme.css web file but kept the bootstrap and portalbasetheme.css files.
Going forward, our plan is to copy the necessary CSS from portalbasetheme.css, make the required changes, and then disable it entirely. Since we don't rely heavily on the design studio for styling, we are not concerned about seeing CSS errors in that app.

Was this reply helpful? Yes No