Skip to content

[CSS] T0.2 Write the CSS authoring guide #17710

Description

@simeonoff

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: --_x for private, --ig-* for public.
  • Scoping:
    • how the @scope boundary works, including the caveat that projected content stays in scope;
    • why we use data-part and not the native part attribute.
  • How-tos:
    • adding a component or a directive (directives register a *.styles.scss with IgxStylesRegistrar);
    • converting an existing component;
    • why some styles still use the legacy layout.

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.md into the guide and remove it.
  • Point the theming-styles agent, AGENTS.md, CONTRIBUTING.md and .github/copilot-instructions.md to the guide. The public skills/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.

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions