Esri’s Web AppBuilder product has been a great way to create simple or complex web map apps for both developers and non-developers. It seemed to be the impetus for many organizations to move away from flash-based flex viewers to JavaScript-powered apps.
I have built apps using both the ArcGIS Online (cloud) and Developer (local) editions of the product. Over the past few years, my approach to loading custom CSS rules has kept changing. And I think I’ve finally reached a good solution that will make porting the style rules during upgrades easier.
TLDR
- I originally loaded the stylesheet in the <head>; there were way too many !important declarations
- The next iteration was updating the rules within each widget’s stylesheet; no more !important declarations, but upgrades will be a nightmare
- Now, I load a stylesheet as the first element within the <body> tag; no more !important declarations, and upgrades will be easy
The Process
There were many tweaks I’ve needed to make to Web AppBuilder apps. These have included hiding elements (a hack for disabling functionality), branding for buttons, and adjusting layouts.
My first iteration was loading my stylesheet with custom rules as the last stylesheet within <head> element. But the issue is that a ton of stylesheets are loaded dynamically. So their rules will win out. My solution was to use a ton of !important declarations so my rules would win out. I knew this wasn’t a great practice, but having all of my rules in a single stylesheet would make porting changes during upgrades of Web AppBuilder smoother.
After a couple years, I decided it was time to take a different approach. My next two approaches occurred within months of each other. The second approach was bad, and I moved on from it fast.
This second approach was to update the rules within each widget’s stylesheet. Much time was spent in Dev tools finding the right file and line number. While this eliminated almost all of the !important declarations, it would be a pain whenever it came time to upgrade one of these apps.
Shortly after using this bad approach, I circled back to the idea of having a single stylesheet to hold all my custom rules. The biggest benefit of this approach is I can easily port this file whenever I upgrade the version of Web AppBuilder. But I needed to figure out how to load this stylesheet after all the dynamically generated stylesheets.
I’m not sure how the idea came to me, but I decided to look into loading my custom stylesheet within the <body> element. I’ve never done this, but it would ensure my rules load last. When I checked the MDN documentation, I learned that “the stylesheet link type is body-ok, and therefore is permitted in the body.” While this isn’t the recommended approach, I decided it was better than littering my stylesheet with !important declarations.
PNM Carto Design Blog 