语法支持

YIS 基于 postcss 支持了 cssnext 语法，因此开发者可以随意书写下一代 css 代码， 可以通过添加 postcss plugin 获得更多预编译能力。

YIS 样式打包 css-module 打包并配置了生成规则，因此可以理解为普通的样式编写是局部的，详情见下文产出规则小节。

reset

YIS 为开发者提供了 reset.css 。

  • 消除浏览器差异
  • 提供 YIS 封装的样式变量，包括字体、颜色、 动画（组件使用）、自定义媒体查询
  • 初始化 100px = 1rem 的 rem 单位
    • /** yis-demo/src/pages/ripple/main.css **/
@import '@qnpm/yis/components/reset.css';

.container{
    //.....
}

/** yis-demo/src/pages/ripple/main.css **/
@import '@qnpm/yis/components/reset.css';

.container{
    //.....
}

产出规则

为了更好地解决样式命名冲突的问题 ， YIS 基于 css-module 设计了命名空间规则，按照 [组件类别]-[文件名称]-[类名] 输出。

内置规则有以下四类：

  • YIS 组件样式由 yis 模块提供，开发者引入 js 同时自动依赖相应样式。使用 yis-xxx-yyy 三级构成 ，xxx 代表组件类别， yyy 为样式名称。
  • theme-xxx-yyy 由开发者扩展 yis组件样式生成，在 theme目录下，以组件名为名的 css 文件。
    • /** themes/header.css **/
@import "@qnpm/yis/components/header/header.css";

:root{
    --header-background-color: var(--color-primary-main);
}
.container{
    height: 45px;
}

/** 产出文件包含全部引入文件样式 省略具体内容代码 **/
.themes-header-container{
		// ......
}
.themes-header-left,
.themes-header-right {
		// ......
}
.themes-header-left.yis-iconbutton-neutral:not([disabled]).yis-iconbutton-floating,.themes-header-right.yis-iconbutton-neutral:not([disabled]).yis-iconbutton-floating{
		// ......
}
.themes-header-left{
		// ......
}
.themes-header-right{
		// ......
}
.themes-header-center {
		// ......
}
.themes-header-center::before {
		// ......
}
.themes-header-container{
 		// ......
}

/** themes/header.css **/
@import "@qnpm/yis/components/header/header.css";

:root{
    --header-background-color: var(--color-primary-main);
}
.container{
    height: 45px;
}

/** 产出文件包含全部引入文件样式 省略具体内容代码 **/
.themes-header-container{
		// ......
}
.themes-header-left,
.themes-header-right {
		// ......
}
.themes-header-left.yis-iconbutton-neutral:not([disabled]).yis-iconbutton-floating,.themes-header-right.yis-iconbutton-neutral:not([disabled]).yis-iconbutton-floating{
		// ......
}
.themes-header-left{
		// ......
}
.themes-header-right{
		// ......
}
.themes-header-center {
		// ......
}
.themes-header-center::before {
		// ......
}
.themes-header-container{
 		// ......
}

  • components-xxx-yyy 由开发者项目级别通用组件，在/src/components目录下面的以组件名为名的 css 文件。

  • pages-xxx-yyy 由开发者页面级别的样式产出，在 pages 目录下以页面名称命名的文件夹下的 main.css 文件。

    • /** pages/home/main.css **/
.list {
    position: relative
}
/** 产出文件**/
.pages-home-list {
    position: relative
}

/** pages/home/main.css **/
.list {
    position: relative
}
/** 产出文件**/
.pages-home-list {
    position: relative
}

引用

如常编写样式文件

/** yis-demo/src/pages/home/main.css **/
.navigation {
    //......
}

.navigation-item {
    //......
    & .img {
        //......
    }
    & .text {
        //......
    }
}

打包阶段 引入的 css 文件会生成一个对象对应着样式到产出样式名称，因此 js 文件中引用的是响应的类名，生成名称规则参考 产出规则。

{
    "navigation":"pages-home-navigation",
    "navigation-item":"pages-home-navigation-item",
    "img":"pages-home-img",
    "text":"pages-home-text"
};

在 js 文件中引用，传入给指定元素。对于可以复用的组件可以将引用的样式附在组件的 theme 属性上，当调用组件时传入 theme 会使用传入的样式文件名称。

代码节选自：yis-demo/src/pages/home/components/navigation.css 
import { Component } from "@qnpm/yis";
import { View } from '@qnpm/yis/components';
import styles from "../main.css";
import classnames from "classnames";

export default class Navigation extends Component {
    displayName = "Navigation";
    theme = styles;
    handleClick(indx) {
        this.props.removeNavigation(indx);
    }
    render() {
        const theme = this.theme;
        return (
            <div className={theme.navigation}>
                {this.props.data.map(item => (
                    <View
                        className={theme["navigation-item"]}
                        onTouchTap={this.handleClick.bind(this, item.index)}
                        key={item.index}
                        index={item.index}
                    >
                        <div
                            className={classnames(theme.img, "iconfont")}
                            dangerouslySetInnerHTML={{ __html: item.icon }}
                        />
                        <div className={theme.text}>{item.text}</div>
                    </View>
                ))}
            </div>
        );
    }
}
变量