# Overview
Per T344021#9312795, we need to:
> - Create and document a standard in the library where we always add specificity when styling a subcomponent
> - Add the subcomponent's class as an additional class selector.
Concretely, the latter means that when there's e.g. an Icon component inside the Label component, the Label component currently styles it with `&__icon` (which expands to `.cdx-label__icon`), but instead of that we want it to use `&__icon.cdx-icon` (which expands to `.cdx-label__icon.cdx-icon`).
See T344021#9312795 for an inventory of which components use which other components (also duplicated in the acceptance criteria below).
## Acceptance Criteria
[X] Document this standard
[ ] Apply it in all components
[X] Accordion: Button, Icon
[X] ButtonGroup: Button
[X] Card: Icon, Thumbnail
[ ] Checkbox: Label (via `binary-input.less`)
[X] Combobox: Button, Icon, TextInput
[X] Dialog: Button
[X] InfoChip: Icon
[X] InputChip: Button
[X] Label: Icon
[ ] Lookup: TextInput
[ ] Menu: MenuItem, ProgressBar
[X] MenuItem: Icon, Thumbnail
[X] Message: Button, Icon
[ ] Radio: Label (via `binary-input.less`)
[X] SearchInput: Button, TextInput
[X] Select: Icon
[ ] Tabs: Button (`cdx-tabs__list__item`)
[X] TextArea: Icon
[X] TextInput: Icon
[X] Thumbnail: Icon
[X] ToggleButtonGroup: ToggleButton
[ ] ToggleSwitch: Label
[X] TypeaheadSearch: Icon, MenuItem, SearchInput
## Resources
- [[ https://css-tricks.com/specifics-on-css-specificity/ | CSS Specificity (CSS Tricks) ]]
- [[ https://doc.wikimedia.org/codex/latest/contributing/contributing-code/developing-components.html#writing-styles | Codex contributing code: writing styles ]]
- Section on "selectors and structure"
- [[ https://www.mediawiki.org/wiki/Codex#Using_your_local_version_of_Codex_in_your_local_MediaWiki_instance | Using your local version of Codex in your local MediaWiki instance ]]
### Instructions to test local Codex changes in a MediaWiki instance
Pre-req:
- Open 3 separate editor windows (VSCode) that `cd` into these repositories: MediaWiki, CodexExample, and Codex
- Run an instance of MediaWiki (instructions found in MediaWiki repo `DEVELOPERS.md`)
- Install CodexExample extension in MediaWiki
- Use [[ https://gitlab.wikimedia.org/repos/design-systems/CodexExample/-/merge_requests/10 | this CodexExample playground branch ]]
- In CodexExample, checkout the branch by running `git checkout css-specificity-staging`
Steps:
1. Make changes in the Codex repo
2. In Codex, run `npm run -w @wikimedia/codex build`
3. In MediaWiki core, run `cp ../codex/packages/codex/dist/modules/* resources/lib/codex/modules/`
4. In the browser that's running MediaWiki on http://localhost:8080, navigate to the CodexExample page **///wiki/Special:CodexExample//** page (http://localhost:8080/wiki/Special:CodexExample)
5. In the CodexExample repo, make changes in this [[ https://gitlab.wikimedia.org/repos/design-systems/CodexExample/-/merge_requests/10 | "playground" branch ]] (don't push up changes)
- Refresh the **//Special:CodexExample//** page after changes are made in CodexExample (mainly working in files, `App.vue` and `extension.json`)
- In the browser console, run `mw.loader.load( 'ext.codexExample.secondThing' )`