Repository navigation
[CSS] T0.2 Write the CSS authoring guide #17710
Description
Part of #17707. Implemented in #17752.
The conventions agreed in #17669 need to live in the repo, so that contributors and AI agents follow one written standard instead of copying whatever is nearest.
What to do
Rewrite .github/themes-contributing.md as the single guide for component styles. It's the guide the theming-styles agent already reads and CONTRIBUTING.md already links to. The previous version described the layout from before #15125 and required BEM mixins and @extend. The guide should cover:
- How styles reach the page:
- where component styles live, and what each build command produces;
- the cascade layer order:
ig.reset, ig.compositions, ig.base, ig.<theme>, ig.derived, ig.utilities; - runtime design-system switching.
- What goes where:
- design tokens hold values;
- each component's styles are one
block(); - state comes from native pseudo-classes, ARIA the component already sets, or
data-*attributes.
- The rules:
- Values go in tokens, and theme files only set values.
- Each theme file is one
block(). - Selectors inside a block are plain CSS:
:scope,[data-part~='…'],[data-…='…']. - Prefer native state, and use enumerated
data-*attributes over booleans. - A component styles only itself; for nested components it may set only the host layout and public tokens.
- No
!important, no@extend, no[dir=…]. - Custom properties:
--_xfor private,--ig-*for public.
- Scoping:
- how the
@scopeboundary works, including the caveat that projected content stays in scope; - why we use
data-partand not the nativepartattribute.
- how the
- How-tos:
- adding a component or a directive (directives register a
*.styles.scsswithIgxStylesRegistrar); - converting an existing component;
- why some styles still use the legacy layout.
- adding a component or a directive (directives register a
The guide describes how things work, not plans or history. Shared layout helpers are added to it when they land in Stage 3.
Then:
- Fold
css-naming-convention.mdinto the guide and remove it. - Point the theming-styles agent,
AGENTS.md,CONTRIBUTING.mdand.github/copilot-instructions.mdto the guide. The publicskills/igniteui-angular-theming/skill is for app developers, so it stays unchanged.
Done when
#17752 is merged after a team review. It stays in draft until #17711 (block()) and #17715 (ig-scope and the layer order) land, since the guide documents both. Invite the Web Components team to comment, since part names are meant to be shared.
Activity