JSS Core Styles使用指南

介绍

• JSS是CSS的创作工具，它使你可以使用JavaScript以声明性，无冲突和可重用的方式描述样式。它可以在浏览器中，服务器端或在Node的构建时进行编译。
• JSS与框架无关。它由多个软件包组成：内核，插件，框架集成和其他。
• 基于对象的样式语法，用于声明样式表
• JSS被设计为尽可能地接近CSS语法。但是，也有一些例外。 JSS的使用基于插件的体系结构，因此插件通过可选插件添加了核心软件包中的某些语法，并通过可选插件添加了其他语法。

特性

Real CSS

JSS生成实际的CSS，而不是内联样式。它支持所有现有的CSS功能。 CSS规则创建一次，并且使用与内联样式相反的类名称在元素之间重用。另外，当DOM元素更新时，将应用先前创建的CSS规则。

无冲突的选择器

默认情况下，JSS生成唯一的类名。它可以避免典型的CSS问题，默认情况下，所有问题都是全局的。它完全消除了命名约定的需要。

代码重用

使用JavaScript作为宿主语言，使我们有机会以常规CSS无法实现的方式重用CSS规则。你可以利用JavaScript模块，变量，函数，数学运算等。如果操作正确，它仍然可以完全声明。

易于删除和修改

明确使用CSS规则可让你追踪到使用者，并确定是否可以安全地删除或修改它。

动态样式

使用JavaScript函数和Observables可以在浏览器中动态生成样式，从而使你有机会访问应用程序状态，浏览器API或用于样式化的远程数据。你不仅可以定义样式，还可以在任何时间点以有效的方式更新样式。

用户控制的动画

JSS高效地处理CSS更新使得使用它创建复杂的动画成为可能。使用函数值，Observables并将其与CSS过渡结合使用，将为用户控制的动画提供最佳性能。对于预定义的动画，最好使用@keyframes和transitions，因为它们将完全解除JavaScript线程的阻塞。

关键CSS

为了优化首次绘画的时间，可以使用服务器端渲染并提取关键的CSS。你可以将CSS的呈现与HTML的呈现耦合，这样就不会生成未使用的CSS。这将在服务器端渲染期间提取最少的关键CSS，并允许你内联它。

插件

JSS核心实现了基于插件的体系结构。它允许你创建可实现自定义语法或其他强大功能的自定义插件。 JSS有许多官方插件，可以单独安装或使用默认预设安装。社区插件的一个很好的例子是jss-rtl。

富有表达力的语法

由于使用了各种插件，JSS允许你使用嵌套，全局选择器以及具有现有全局类名的组合。例如。 jss-plugin-expand允许你以比CSS更加可读的方式来表达类似box-shadow的属性。如果要直接从浏览器开发工具中复制粘贴样式，也可以使用模板字符串。

完全隔离

另一个有用的插件示例是jss-plugin-isolate，它允许你将元素与全局级联规则完全隔离，并可能覆盖不需要的属性。在创建应该在第三方文档内部呈现的小部件时特别有用。

与react集成

React-JSS软件包提供了一些附加功能：

• 动态主题-允许基于上下文的主题传播和运行时更新。
• 关键CSS提取-仅从呈现的组件中提取CSS。
• 惰性评估-安装组件时会创建样式表。
• 样式表的静态部分在所有元素之间共享。
• 函数值和规则以props作为参数自动更新。

JavaScript构建管道

无需为CSS进行其他构建管道配置。无论选择哪种工具来构建JavaScript，它都可以与JSS一起使用。

基本语法

const styles = {
  button: {
    color: 'red',
    'font-size': '12px'   // or fontSize: '12px'
  },
  container: {
     width: '200px',
     height: '100px',
     '& .content': {  // 子类
        fontSize: '18px'
     },
     '&:hover': {  // 容器hover属性
       backgroundColor: '#DDD'
     },
     '& p': {  // 子节点
       textIndent: '10px'
     }
  },
}

编译为：

.button-0-1-66 {
  color: red;
  font-size: 12px;
}
.container-0-1-67 {
  width: 200px;
  height: 100px;
}
.container-0-1-67 .content {
  font-size: 18px;
}
.container-0-1-67:hover {
  background-color: #DDD;
}
.container-0-1-67 p {
  text-indent: 10px;
}

媒体查询

const styles = {
  button: {
    width: 100
  },
  '@media (min-width: 1024px)': {
    button: {
      width: 200
    }
  }
}

使用ES6常量

const minWidth = 1024

const styles = {
  button: {
    width: 100
  },
  [`@media (min-width: ${minWidth}px)`]: {
    button: {
      width: 200
    }
  }
}

编译为：

.button-0 {
  width: 100px;
}
@media (min-width: 1024px) : {
  .button-0 {
    width: 200px;
  }
}

关键帧动画

关键帧名称将使用与类名称相同的id生成器函数。动画名称默认为作用域。要在同一样式表中访问它，可以将$ref语法用作animationName或animation属性的值。

此外，你可以通过sheet.keyframes。{name}映射访问生成的名称。

要生成全局动画名称，可以使用@global规则。

const styles = {
  '@keyframes slideRight': {
    from: {opacity: 0},
    to: {opacity: 1}
  },
  container: {
    animationName: '$slideRight'
  }
}

编译为：

@keyframes keyframes-slideRight-0 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.container-1 {
  animation-name: keyframes-slideRight-0;
}

使用@global

const styles = {
  '@global': {
    body: {
      color: 'green'
    },
    a: {
      textDecoration: 'underline'
    }
  }
}

备选值

const styles = {
  container: {
    background: 'linear-gradient(to right, red 0%, green 100%)',
    fallbacks: {
      background: 'red'
    }
  }
}

或者

const styles = {
  container: {
    display: 'flex',
    fallbacks: [{display: 'box'}, {display: 'flex-box'}]
  }
}

编译为：

.container-0 {
  background: red;
  background: linear-gradient(to right, red 0%, green 100%);
}

使用@font-face自定义字体

const styles = {
  '@font-face': {
    fontFamily: 'MyWebFont',
    src: 'url(webfont.eot)'
  }
}
// 或
const styles = {
  '@font-face': [
    {
      fontFamily: 'MyWebFont',
      src: 'url(webfont.eot)'
    },
    {
      fontFamily: 'MySecondFont',
      src: 'url(webfont2.eot)'
    }
  ]
}

编译为：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot');
}
// 或
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot');
}
@font-face {
  font-family: 'MySecondFont';
  src: url('webfont2.eot');
}

空格和逗号分隔值的替代语法

为了以JavaScript方式描述用空格或逗号分隔的CSS值，jss引入了基于数组的语法。

使用此语法有一些优点：

1、插件jss-plugin-default-unit能够有效设置数字值的默认单位。
2、你可以在值声明中使用变量，而无需使用字符串模板或串联。

逗号分隔值

const styles = {
  button: {
    // 逗号分隔值，内部包含常规CSS字符串
    border: ['1px solid red', '1px solid blue']
  }
}

编译为：

.button-0 {
  border: 1px solid red, 1px solid blue;
}

const styles = {
  button: {
    // 逗号分隔值，内部包含常规CSS字符串.
    border: [
      // 数字可以自动成为默认单位。
      [1, 'solid', 'red'],
      [1, 'solid', 'blue']
    ]
  }
}

编译为：

.button-0 {
  border: 1px solid red, 1px solid blue;
}

以空格分隔的值

const styles = {
  button: {
    // 以空格分隔的值。
    margin: [[5, 10]]
  }
}

编译为：

.button-0 {
  margin: 5px 10px;
}

修饰符!important

const styles = {
  button: {
    color: [['red'], '!important'],
    margin: [[5, 10], '!important']
  }
}

编译为：

.button-0 {
  color: red !important;
  margin: 5px 10px !important;
}

属性content
将字符串分配给content属性时，在CSS中需要双引号或单引号。因此，你还必须在内容的值字符串中提供引号，使得属性content能匹配正解的表示形式。

const styles = {
  button: {
    '&:after': {
      content: '"JSS"'
    }
  }
}

编译为：

.button-0:after {
  content: 'JSS';
}

参考
JSS