Load page-specific styles separate from global styles

[anselmbradford]

The CSS contains what appears to be component-specific styles (e.g. https://github.com/cfpb/cfgov-refresh/blob/gh-pages/static/css/activity.less) and page-specific styles (e.g. https://github.com/cfpb/cfgov-refresh/blob/gh-pages/static/css/budget.less).

Could page-specific and/or components go in their own sub-directory with static/css and appropriate documentation be provided where topdoc comments are not provided?

cc @Scotchester @virginiacc

[Scotchester]

Yes, putting page-specific CSS in a subdirectory is a good idea. Moreover, at some point, we want a solution for loading page-specific CSS ONLY on the pages that require it. Otherwise, we'll have one gigangtic singular CSS file.

[anselmbradford]

Yes, that sounds like a great idea!

Just found that page-specific styles are documented in https://github.com/cfpb/cfgov-refresh/blob/gh-pages/static/css/main.less#L115-L125 https://github.com/cfpb/consumerfinance.gov/blob/master/cfgov/unprocessed/css/main.less#L141-L150

[GrooveCS]

Is this still an Open Issue?

[anselmbradford]

Hi @GrooveCS, to an extent. We have the majority of our CSS in https://github.com/cfpb/consumerfinance.gov/blob/master/cfgov/unprocessed/css/main.less, but we do have "apps" that have their CSS and other assets isolated from the rest of the code, e.g. https://github.com/cfpb/consumerfinance.gov/tree/master/cfgov/unprocessed/apps/owning-a-home/css has its own main.less, which is only delivered to that app (live site) via the reference in its template https://github.com/cfpb/consumerfinance.gov/blob/master/cfgov/jinja2/v1/owning-a-home/explore-rates/index.html#L19

However, when a component is included in a page via the Wagtail CMS, that component's JavaScript gets added to the page, but its CSS is delivered everywhere. We should probably have something analogous for the CSS to how the JS works, so that the component's CSS is added into the page's CSS bundle somehow when it's included in a page via Wagtail, and exclude it otherwise. For example, the video player JS is added here, but the CSS for the video player is together with everything else in main.less https://github.com/cfpb/consumerfinance.gov/blob/master/cfgov/unprocessed/css/main.less#L129