Simplify `Typography` styling by removing redundant nesting
- Dominant language
- JavaScript
- Stars
- 1.4k
- Forks
- 383
- Avg merge
- 4d 14h
- Merged PRs (30d)
- 77
Description
## Feature Description
Current in the styles https://github.com/google/site-kit-wp/blob/624e894a6be48ae7c145affd3c5dd00ad80812cc/assets/sass/components/global/_googlesitekit-typography.scss#L56-L72 we have redundant nesting/chaining of the classes.
Remove the `.googlesitekit-typography` main selector and define the type and size classes independently, without chaining. This will simplify overrides and reduce unnecessary selector specificity.
---------------
_Do not alter or remove anything below. The following sections will be managed by moderators only._
## Acceptance criteria
* The redundant `.googlesitekit-typography` wrapper selector is removed.
* Type classes (`.googlesitekit-typography--#{$type}`) are defined independently, not chained with a parent.
* Size classes (`.googlesitekit-typography--#{$size}`) are defined independently, not chained with a parent.
* No visual change should be present after the edit
## Implementation Brief
- [ ] In `_googlesitekit-typography.scss`, make the following changes inside the `.googlesitekit-plugin` rule:
* Remove the `.googlesitekit-typography` wrapper class selector. The loops inside should no longer be nested within it.
* Create a new `@each` loop that iterates over the `$typography-font-families` map.
* This loop should generate the "type" classes (e.g., `.googlesitekit-typography--display`, `.googlesitekit-typography--headline`).
* Each class generated in this loop should only contain the `font-family` property.
* Modify the existing primary `@each` loop that iterates over `$typography-settings`.
* Instead of being nested, this loop will now generate compound selectors by chaining the "type" and "size" classes directly (e.g., `.googlesitekit-typography--display.googlesitekit-typography--small`).
* These generated class rules will contain the specific styles for `font-size`, `font-weight`, `letter-spacing`, and `line-height`.
- [ ] In `assets/sass/components/surveys/_googlesitekit-survey-header.scss`
- For following selector:
https://github.com/google/site-kit-wp/blob/3e4fdbe13f68f7c11070a9f25308b7135e665077/assets/sass/components/surveys/_googlesitekit-survey-header.scss#L71
Remove the `.googlesitekit-typography` class.
### Test Coverage
* No tests required.
## QA Brief
* Smoke test the plugin with a focus on typography:
* Ensure headings, paragraphs etc. look normal
* Ensure no regressions were introduced
## Changelog entry
*
Contributor guide
Research direction
Start in assets/sass/components/global/_googlesitekit-typography.scss and inspect the typography loops inside the .googlesitekit-plugin rule. Update the generated selectors as described, then remove the .googlesitekit-typography class from the selector in assets/sass/components/surveys/_googlesitekit-survey-header.scss. Done means the redundant wrapper is gone, type and size rules match the acceptance criteria, and a typography-focused smoke test shows no visual regressions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 2/5
- Estimated time
- Half a day
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100