Opened 8 years ago
Closed 8 years ago
#2479 closed defect (bug) (fixed)
Support Theme: Remove excessively verbose selectors
Reported by: | SergeyBiryukov | Owned by: | SergeyBiryukov |
---|---|---|---|
Milestone: | Priority: | normal | |
Component: | Support Forums | Keywords: | has-patch commit |
Cc: |
Description
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).
An example of unintended visual changes