tencent cloud

All product documents
Tencent Cloud Super App as a Service
DocumentationTencent Cloud Super App as a ServiceGuildlines for Mini Program DevelopmentMini Program Code CompositionWXSS Style
WXSS Style
Download PDF
Last updated: 2025-03-25 18:15:54
WXSS Style
Last updated: 2025-03-25 18:15:54
Download PDF
WeChat Style Sheets (WXSS) is a style language used to describe the style of WXML component styles.
WXSS is similar to CSS in Web development. In order to be more suitable for mini program development, WXSS has been extended and modified based on CSS.

File composition


Project common style: The app.wxss in the root directory is the project common style and will be injected into every page of mini programs. Page style: A WXSS file with the same name and at the same level as the page registered with app.json. In the above example, pages/rpx/index is registered and the file pages/rpx/index.wxss is the style for page pages/rpx/index.wxml.
Other styles: Other styles can be referenced by project common styles and page styles. For referencing methods, see WXSS Reference section in this document.
Unlike web development, you don't need to optimize the number of style files requested for mini program development. You just focus on the code organization. Style files will go through compilation optimization and detailed compilation will be introduced later.

Dimension unit

In WXSS, the rpx (responsive pixel) was introduced. You can use this to adapt to different screen width to make development easier.
For example, if px is used, a page will have too much white space for the same element displayed under different screen width.

The following shows that the rpx is used:

After the mini program code is compiled, rpx will be converted to px. The conversion uses 375 physical pixels as a standard, which means 1 rpx = 1 px on a screen with 375 physical pixels width.
For example, on iPhone 6, the screen width is 375 px, and there are 750 physical pixels in total, then 1 rpx = 375 / 750 physical pixels = 0.5 px.

WXSS reference

In CSS, developers can reference another style file like this: @import url ('./ test_0.css')
This does not merge test_0.css into index.css on the request, which means that when index.css is requested, there will be an additional request for test_0.css.

In the mini program, we can still implement style reference in a way as shown below:
@import './test_0.wxss'
Since WXSS will be compiled and packaged into the object file, users only need to download it once. And there will be no redundant file requests due to style references during usage.

Inline style

WXSS inline style is consistent with that in Web development:
<!--index.wxml-->
<!--Inline style-->
<view style="color: red; font-size: 48rpx"></view>

Mini programs support dynamically updating inline styles: 
<!--index.wxml-->

<!-- Dynamically changing inline styles-->
<!--
{
  eleColor: 'red',
  eleFontsize: '48rpx'
}
-->
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>

Selectors

The following selectors are supported:
Type
Selector
Example
Description
class selector
.class
.intro
Selects all components with class = "intro"
ID selector
#id
#firstname
Selects the components with id = "firstname"
element selector
element
view checkbox
Selects `view` components of all documents and all `checkbox` components
pseudo-element selector
::after
view::after
Insert content after the `view` component
pseudo-element selector
::before
view::before
Insert content before the `view` component
The priority of WXSS is similar to that of CSS, with weights as shown below:

The higher the weight, the higher the priority. The style set later takes precedence over the style set earlier, given the same priority.
The priority weights of WXSS selectors:
view{ // Weight is 1
  color: blue
}

.ele{ // Weight is 10
  color: red
}

#ele{ // Weight is 100
  color: pink
}

view#ele{ //Weight 1 + 100 = 101, highest priority, and element color is orange
  color: orange
}

view.ele{ // Weight is 1 + 10 = 11
  color: green
}

Official style library

For most developers, ECMAScript and JavaScript are the same thing, but strictly speaking, they are different. ECMAScript is a standard for scripting language and it is standardized by Ecma International in the document ECMA-262. JavaScript is an implementation of ECMAScript. Knowing this helps you understand that JavaScript in mini program development is different from JavaScript in browsers and in NodeJS.
ECMA-262 specifies components of the ECMAScript language.







Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

Contact our sales team or business advisors to help your business.

Contact Us
Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 available.

Submit a Ticket
7x24 Phone Support
Hong Kong, China
+852 800 906 020 (Toll Free)
United States
+1 844 606 0804 (Toll Free)
United Kingdom
+44 808 196 4551 (Toll Free)
Canada
+1 888 605 7930 (Toll Free)
Australia
+61 1300 986 386 (Toll Free)
EdgeOne hotline
+852 300 80699
More local hotlines coming soon