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

[WordPress Trac]

#47925: Twenty Nineteen: Size of style.css seems excessively large (225% larger
than next largest theme's CSS)
---------------------------+------------------------------
 Reporter:  westonruter    |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:  5.0
 Severity:  normal         |  Resolution:
 Keywords:                 |     Focuses:  performance
---------------------------+------------------------------

Comment (by kjellr):

 Off the top of my head, I can provide a few additional details.

 > Depending on how SASS is written, a little bit of code can end up
 generating a lot of CSS. Is this the case here for Twenty Nineteen? It
 doesn't seem the large amount of CSS is directly due to styling blocks,
 since the other themes have also been updated to style blocks.

 It could definitely be a part of it! I'm sure the SASS could use a
 refactor — nobody's been available to take that on since the theme
 launched, but it would be incredibly welcome.

 Regarding the block styling: Twenty Nineteen does include more extensive
 styling for the core blocks than the other core themes do (for instance,
 the off-center alignments), so I'd definitely expect the blocks code to be
 just a little heavier at least.

 > Then i’d Look to see if the thing is responsive or mobile-first, bc at
 least some rules can stay the same from {min-width: 0} to JumboTron size.
 For example.
 >
 > And then would come my favorite, replacing floats with Flexbox for
 things that line up in one direction or Grid for things that lay out in
 two dimensions. Combine that with a mobile-first stylesheet and we can
 take a bath towel to a good 40% of a tightly written responsive sheet.

 Everything ''should'' be mobile first, and reliant on flexbox already —
 though I haven't stayed on top of every commit, so I wouldn't say I'm 100%
 positive on that one. 😅

 > At a glance, a large part of the file is taken up by font family
 declarations with non-latin fallbacks​, coming from _mixins-master.scss​,
 which does use extend. If we find a way to optimize them, it should reduce
 the file size in half.

 > Also, a lot of the language-specific styles seem like they would be
 better added via PHP inline styles based on what the actual active
 language is.

 Yes, exactly. I think this is a huge part of the CSS bloat, and would
 probably offer the biggest quick win. Those language-specific font
 fallbacks were a beast to build, and provide a lot of extra code (most of
 which is unused for many users). You can find some details on the current
 (and previous) implementation here:

 https://core.trac.wordpress.org/ticket/45731

 These are really screaming for a better solution.

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