WXSS serves as the dedicated styling language for defining the visual presentation of WXML components within the WeChat Mini Program ecosystem. While it retains the core syntax and cascading mechanics of standard CSS, the framwork entroduces platform-specific modifications optimized to mobile interface development.

Key extensions beyond traditional CSS include responsive sizing units and a modular import system.

Responsive Sizing with rpx

The rpx (responsive pixel) unit automatically scales layouts according to the device viewport. The framework normalizes every screen width to exactly 750rpx. On an iPhone 6, which reports a logical width of 375px, the conversion ratio becomes 1rpx = 0.5px. Consequently, a 750px wide design draft maps directly to 750rpx in code.

Recommendation: Use a 750px width baseline for all UI mockups to streamline dimension conversion. Note: Fractional pixel rounding on narrow screens may cause minor rendering artifacts. Avoid relying on exact 1px borders in highly constrained layouts.

External Stylesheet Imports

Modular styling is handled through the @import directive. Specify the relative path to the target stylesheet and terminate the declaration with a semicolon.

/* shared-components.wxss */
.btn-base {
  border-radius: 12rpx;
  font-weight: 500;
}

/* dashboard.wxss */
@import "../styles/shared-components.wxss";
.action-panel {
  display: flex;
  gap: 20rpx;
}

Inline vs. Class-Based Styling

Components support both class and style attributes for visual configuration.

• class: Binds static rules defined in stylesheets. Provide space-separated class names without the leading dot.

  <view class="card-wrapper elevated"></view>
  

• style: Accepts runtime-evaluated declarations. Because inline styles are parsed during the rendering cycle, reserve this attribute exclusively for data-bound values. Embedding static rules here degrades performance.

  <view style="background-color: {{themeColor}}; height: {{boxHeight}}rpx;"></view>
  

Selector Support

The rendering engine processes standard CSS selectors, including class (.identifier), ID (#identifier), element tags, pseudo-classes (:first-child), pseudo-elements (::before), and descendant combinators.

Global vs. Page-Level Scope

Rules declared in app.wxss function as global defaults and apply across all application routes. Stylesheets attached to individual pages (e.g., profile.wxss) operate within a local scope. When selector conflicts arise, page-level definitions automatically override global declarations due to higher compilation priority.