[wp-meta] [Making WordPress.org] #2479: Support Theme: Remove excessively verbose selectors

[Making WordPress.org]

#2479: Support Theme: Remove excessively verbose selectors
----------------------------+------------------------------
 Reporter:  SergeyBiryukov  |      Owner:
     Type:  defect          |     Status:  new
 Priority:  normal          |  Milestone:
Component:  Support Forums  |   Keywords:  has-patch commit
----------------------------+------------------------------
 While working on #2166, I've found the
 [source:sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-
 support/sass/site/_bbpress.scss?rev=4874#L461 styles responsible for
 content width] on the affected views.

 Adding more selectors to those styles (e.g. `.single-reply main`, `.topic-
 tag-edit main`) resulted in a ~500 KB `style.css` file and some unintended
 visual changes elsewhere (see the screenshot).

 Upon further investigation, it turned out the theme's usage of SASS'
 `extend` feature leads to some excessively verbose selectors, most of
 which are never used and create unnecessary bloat
 ([https://www.smashingmagazine.com/2015/05/extending-in-sass-without-mess/
 Extending In Sass Without Creating A Mess] is a good reading on using
 `extend` more efficiently). If I had to guess, the issue above was caused
 by hitting some limit on CSS selector length.

 One example is `p.bbp-topic-meta a`, which is
 [source:sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-
 support/style.css?rev=4874#L890 duplicated for all other link-related
 styles] (and there's a lot of them) just to override two values from `bb-
 base` theme (`color` and `text-decoration`) in three links on topic lists.

 Another one is `.plugin-upload-form` styles, which apparently were copied
 from `wporg-plugins` theme, but are not used in the forums theme. They are
 also duplicated for all link- and button-related styles.

 In the attached patch:
 * Reorganize selectors to reduce bloat and avoid hitting CSS selector
 length limit.
 * Remove `.plugin-upload-form` references.
 * No visual changes.

 As a bonus, this also makes `style.css` 4 times smaller (75 KB instead of
 300 KB).

--
Ticket URL: <https://meta.trac.wordpress.org/ticket/2479>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org