Opened 9 years ago
Closed 9 years ago
#2479 closed defect (bug) (fixed)
Support Theme: Remove excessively verbose selectors
| Reported by: |
|
Owned by: |
|
|---|---|---|---|
| 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-formreferences. - 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