Make WordPress Core

Opened 7 years ago

Closed 6 years ago

#24016 closed enhancement (worksforme)

RFE : Amend coding standards so that theme developers place dynamic styles in separate files

Reported by: pembo13 Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.5
Component: Themes Keywords:
Focuses: Cc:


Currently, theme authors are placing their dynamically generated CSS styles inline of the HTML output on every page. In a recent example I have seen from a purchased theme, what should have been a ~45KB page was being sent as a ~225KB page because of dynamically generated styles.

With minimal code, the styles can be moved to there own file (at least from the perspective of the client user agent) and HTTP features such as "etag", "last-modified", and "expires" can easily be made use of to make the browsing experience better.

My suspicion is that most of theme designers are not programmers, and so would not do such a thing on their own. A standardized example would help theme designers builder leaner pages.

  • dynamic styles -- CSS rules created based on administrator input into theme specific settings pages

Change History (6)

#1 @SergeyBiryukov
7 years ago

  • Version changed from trunk to 3.5

What's your suggestion exactly? Adding a new requirement under Code Quality section for themes?

This should probably be discussed with the Theme Review Team.

#2 @SergeyBiryukov
7 years ago

  • Component changed from General to Themes
  • Keywords needs-codex added
  • Milestone changed from Awaiting Review to WordPress.org
  • Type changed from feature request to enhancement

#3 follow-up: @pembo13
7 years ago

I wasn't sure what the best medium was to start this discussion.

I have one suggestion so far, there may be others, and it can definitely be cleaned up to make more Wordpress friendly.

Example Solution

  1. use optional standard file: THEME_FOLDER/dynamic-styles.php
  2. if file exists in theme register stylesheet
  3. when visitor user-agent requests the URL path pointing to dynamic-styles.php
    1. generate last modified date (could be based on time-to-live and current time)
    2. generate expiration date (offset from last modified date based on TTL)
    3. generate E-Tag based on last modified date
    4. check for matches on HTTP_IF_MODIFIED_SINCE and HTTP_IF_NONE_MATCH and serve HTTP 304 if matching
    5. if no match serve headers
    6. generate styles based on theme needs (could be filters, or action hooks, etc.)
    7. serve response with HTTP 200 and content-type: text/css

#4 in reply to: ↑ 3 @SergeyBiryukov
7 years ago

  • Keywords needs-codex removed
  • Milestone changed from WordPress.org to Awaiting Review

Replying to pembo13:

I wasn't sure what the best medium was to start this discussion.

Try the Theme Reviewers mailing list: http://lists.wordpress.org/mailman/listinfo/theme-reviewers

#5 @kovshenin
7 years ago

When visitor user-agent requests the URL path pointing to dynamic-styles.php

This will return a 403 error on most well-configured hosts, where PHP execution is disallowed inside the wp-content directory.

I think themes and plugins that generate CSS should use the Filesystem API and write actual .css files to disk, which could then be served by apache/nginx, cached by browsers and propagated across configured CDNs.

#6 @nacin
6 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.