[wp-trac] [WordPress Trac] #47925: Twenty Nineteen: Size of style.css seems excessively large (225% as large as the next largest theme's CSS)

[WordPress Trac]

#47925: Twenty Nineteen: Size of style.css seems excessively large (225% as large
as the next largest theme's CSS)
---------------------------+-------------------------------
 Reporter:  westonruter    |       Owner:  (none)
     Type:  enhancement    |      Status:  new
 Priority:  normal         |   Milestone:  Future Release
Component:  Bundled Theme  |     Version:  5.0
 Severity:  normal         |  Resolution:
 Keywords:  has-patch      |     Focuses:  css, performance
---------------------------+-------------------------------

Comment (by westonruter):

 Replying to [comment:15 sabernhardt]:
 > I'm wary of increasing specificity of element selectors by grouping them
 with class and/or id selectors in `:is()`.

 This is a great point I hadn't considered. I wish that `:is()` would only
 carry the specificity of the inner selector that actually matched, not the
 specificity of all the contained selectors.

 Test case: https://codepen.io/westonruter/pen/eYwvPLj?editors=1100

 In this case, could `:where()` be used instead? It ''specifically'' has a
 ''specificity'' of zero. This was leveraged recently in Gutenberg to
 facilitate overrides. So the generated CSS could rather be:


 {{{#!css
 :where(
     body, button,
     input,
     select,
     optgroup,
     textarea, .author-description .author-link,
     .comment-metadata,
     .comment-reply-link,
     .comments-title,
     .comment-author .fn,
     .discussion-meta-info,
     .entry-meta,
     .entry-footer,
     .main-navigation,
     .no-comments,
     .not-found .page-title,
     .error-404 .page-title,
     .post-navigation .post-title,
     .page-links,
     .page-description,
     .pagination .nav-links,
     .sticky-post,
     .site-title,
     .site-info,
     #cancel-comment-reply-link,
     h1,
     h2,
     h3,
     h4,
     h5,
     h6, .page-title, blockquote cite, table, .button,
     input[type="button"],
     input[type="reset"],
     input[type="submit"], .comment-navigation .nav-previous,
     .comment-navigation .nav-next, .comment-list .pingback .comment-body,
     .comment-list .trackback .comment-body, .comment-list .pingback
 .comment-body .comment-edit-link,
     .comment-list .trackback .comment-body .comment-edit-link, .comment-
 form .comment-notes,
     .comment-form label, .widget_archive ul li,
     .widget_categories ul li,
     .widget_meta ul li,
     .widget_nav_menu ul li,
     .widget_pages ul li,
     .widget_recent_comments ul li,
     .widget_recent_entries ul li,
     .widget_rss ul li, .widget_tag_cloud .tagcloud, .widget_calendar
 .calendar_wrap .wp-calendar-nav, .entry .entry-content .wp-block-button
 .wp-block-button__link, .entry .entry-content .wp-block-archives li > a,
     .entry .entry-content .wp-block-categories li > a,
     .entry .entry-content .wp-block-latest-posts li > a, .entry .entry-
 content .wp-block-latest-posts .wp-block-latest-posts__post-date, .entry
 .entry-content .wp-block-verse, .entry .entry-content .has-drop-
 cap:not(:focus):first-letter, .entry .entry-content .wp-block-pullquote
 cite, .entry .entry-content .wp-block-cover-image .wp-block-cover-image-
 text,
     .entry .entry-content .wp-block-cover-image .wp-block-cover-text,
     .entry .entry-content .wp-block-cover-image h2,
     .entry .entry-content .wp-block-cover .wp-block-cover-image-text,
     .entry .entry-content .wp-block-cover .wp-block-cover-text,
     .entry .entry-content .wp-block-cover h2, .entry .entry-content .wp-
 block-audio figcaption,
     .entry .entry-content .wp-block-video figcaption,
     .entry .entry-content .wp-block-image figcaption,
     .entry .entry-content .wp-block-gallery .blocks-gallery-image
 figcaption,
     .entry .entry-content .wp-block-gallery .blocks-gallery-item
 figcaption, .entry .entry-content .wp-block-file, .entry .entry-content
 .wp-block-file .wp-block-file__button, .entry .entry-content .wp-block-
 latest-comments .wp-block-latest-comments__comment-meta, .wp-caption-text,
 .gallery-caption
 ):where(
     :lang(be),
     :lang(bg),
     :lang(kk),
     :lang(mk),
     :lang(mn),
     :lang(ru),
     :lang(sah),
     :lang(sr),
     :lang(tt),
     :lang(uk)
 ) {
     font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-
 serif;
 }
 }}}

 Test case: https://codepen.io/westonruter/pen/eYwvPQL?editors=1100

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47925#comment:16>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform