Un-scope CSS variables where possible
Nobody has claimed this yet.
- Dominant language
- SCSS
- Stars
- 569
- Forks
- 72
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 5
Description
Currently, we scope our custom CSS properties to the component's primary CSS class, taking a page from Bootstrap's playbook.
.bslib-sidebar-layout {
--bslib-sidebar-fg: ...;
--bslib-sidebar-bg: ...;
--bslib-sidebar-column-main: ...;
}
Some of these variables are for internal use, such as --bslib-sidebar-column-main, and others we anticipate being useful to users or other frameworks, such as --bslib-sidebar-fg.
I think we should consider moving the globally-useful properties to :root and prefix locally-scoped variables with an underscore.
:root {
--bslib-sidebar-fg: ...;
--bslib-sidebar-bg: ...;
}
.bslib-sidebar-layout {
--_bslib-sidebar-column-main: ...;
}
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No file or test is named. Start by locating the component stylesheet definitions for custom properties and inventory which variables are user-facing versus internal; done means globally useful properties are moved to :root and internal properties use the underscore prefix without changing component behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, scss
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100