Opened 7 years ago

Closed 7 years ago

#2479 closed defect (bug) (fixed)

Support Theme: Remove excessively verbose selectors

Reported by: sergeybiryukov's profile SergeyBiryukov Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: Priority: normal
Component: Support Forums Keywords: has-patch commit


While working on #2166, I've found the 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 (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 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).

Attachments (2)

meta-2479.PNG (10.9 KB) - added by SergeyBiryukov 7 years ago.
An example of unintended visual changes
meta-2479.patch (968.3 KB) - added by SergeyBiryukov 7 years ago.

Download all attachments as: .zip

Change History (3)

7 years ago

An example of unintended visual changes

#1 @SergeyBiryukov
7 years ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 4886:

Support Theme: Reorganize some CSS rules:

  • Use SASS' extend feature more efficiently to avoid excessively verbose selectors.
  • Remove unused .plugin-upload-form styles.
  • No visual changes.

Fixes #2479.

Note: See TracTickets for help on using tickets.