Stylesheets

Stylesheets serve not only to beautify pages but also as vital complements to component functionality. A well-designed styling system enhances both user experience and component expressiveness/reusability. In component-based development, traditional global styles often cause conflicts and maintenance difficulties, while scoping mechanisms effectively solve these issues. By confining styles within components, developers can safely define class names and style rules without affecting other components or page elements. This approach preserves CSS flexibility while delivering stronger controllability and maintainability - essential for building modern frontend applications.

Style Scoping

All content in component templates receives a scoping attribute during rendering, for example:

<div>...</div>

Renders as HTML similar to:

<div qk-dbb1016b>...</div>

To prevent component styles from polluting global or other component styles, embedded styles also receive scoping attributes, for example:

<lang-css>
    div {
        color: red;
    }
</lang-css>

Gets converted to:

div[qk-dbb1016b] {
    color: red;
}

Scoping Attribute Position

Normally the scoping attribute gets appended after the last selector:

div p[qk-dbb1016b] {
}
.container .box[qk-dbb1016b] {
}

But we can manually adjust its position using the qk-scope attribute selector, for example:

div[qk-scope] p {
}
[qk-scope] .container .box {
}

Gets converted to:

div[qk-dbb1016b] p {
}
[qk-dbb1016b] .container .box {
}

Edit this page on github (This page has been translated from the Chinese version of the site. There may be inaccuracies in the translation. We welcome your help to improve the accuracy of this document.)