JSS 是一种比 CSS 更强大的抽象，它使用 JavaScript 以声明和可维护的方式描述样式。它是一个高性能的 JS to CSS 编译器，可在运行时和服务器端运行。它是低级别并且与框架无关的，大约有 6KB 大小，并且可以通过插件 API 进行扩展。
主要特性
框架无关
使用场景
构建 JavaScript 很重的应用
使用基于组件的架构
构建可重用的 UI 库
需要一个无冲突的 CSS (外部内容、第三方 UI 组件等)
需要在 JS 和 CSS 之间共享代码
下载量小很重要
健壮性和代码重用很重要
易于维护很重要
Demo
import jss from 'jss'
import preset from 'jss-preset-default'
import color from 'color'
// One time setup with default plugins and settings.
jss.setup(preset())
const styles = {
button: {
fontSize: 12,
'&:hover': {
background: 'blue'
}
},
ctaButton: {
extend: 'button',
'&:hover': {
background: color('blue')
.darken(0.3)
.hex()
}
},
'@media (min-width: 1024px)': {
button: {
width: 200
}
}
}
const {classes} = jss.createStyleSheet(styles).attach()
document.body.innerHTML = `
<button class="${classes.button}">Button</button>
<button class="${classes.ctaButton}">CTA Button</button>
`
生成结果
<head>
<style>
.button-123456 {
font-size: 12px;
}
.button-123456:hover {
background: blue;
}
.ctaButton-789012 {
font-size: 12px;
}
.ctaButton-789012:hover {
background: red;
}
@media (min-width: 1024px) {
.button-123456 {
min-width: 200px;
}
}
</style>
</head>
<body>
<button class="button-123456">Button</button>
<button class="ctaButton-789012">CTA Button</button>
</body>-
CSS-in-JS的工具库让我们可以以一种新的方式来写css，支持动态函数、css作用域并且可移植。但是对于开发者来说，这会使得前端开发的复杂性更高，是否值得使用是具有争议的。这篇本章主要是为了让你从更高的层面去了解CSS-in-JS工具库，从原理上来看它们解决了什么问题，以及在项目中该不该使用它们。 什么是CSS-in-JS 前端主流框架React、Vue、Angular都是基于组件开发的，因此
-
CSS-in-JS库为我们提供了一种编写CSS的新方法。 他们旨在解决CSS的局限性，例如缺乏动态功能，作用域和可移植性。 尽管CSS-in-JS具有很多优点，但它还是一项有争议的技术，因为许多开发人员都在问这是否值得进一步简化前端开发。 本文旨在为您提供CSS-in-JS库的高级概述。 我们将研究这些库如何工作，它们解决了哪些问题以及如何决定是否应使用它们。 什么是CSS-in-JS？ 自从基于
-
CSS-in-JS CSS-in-JS是一种样式方法，它将CSS模型抽象到组件级别，而不是文档级别。 这个想法是CSS可以限定为特定组件 - 并且只限于该组件 - 以使这些特定样式不与其他组件共享或泄露到其他组件，并且仅在需要时才调用。 CSS-in-JS库通过在中插入 使用这个概念的第一个库是JSS。 以下是使用其语法的示例： import React from 'react' import i
-
by Oleg Isonen 由Oleg Isonen CSS-in-JS的权衡 (The tradeoffs of CSS-in-JS) Recently I wrote a higher level overview of CSS-in-JS, mostly talking about the problems this approach is trying to solve. Library
-
JSS 是一个简单的 JavaScript 库，用于获取和设置 CSS 样式规则。支持 FF, Chrome, Safari, Opera, and IE9+示例代码： jss.get('.demo');// returns the following:{ 'font-size': '15px', 'color': 'red'}jss.get();// returns the foll
-
高级编译 常规构建过程使用Google的在线JavaScript编译器将Blockly减少到六个文件，总计约720kb（压缩后的160kb）。 另外，也可以在“高级编译”模式下使用Google的离线JavaScript编译器，它具有许多优点： 由于文件结构改变，总块大小减少到300kb（压缩了100kb） 由于本地编译器的执行，构建时间更快且没有网络流量 无限编译（在线编译器受速率限制） 设置 出
-
我们在当前项目中使用GWT 2.4版。在服务器端，我们使用Spring 我们使用Maven作为构建工具。该应用程序正在JBOSS 7服务器上部署。 目前，我们在一个Eclipse项目中拥有所有内容。指一个应用程序。gwt。xml文件和一个ApplicationContext。spring的xml。我们有大约2000个Java文件，其中大约1500个用于GWT相关的源文件。 该项目仍在增长，源文件越
-
本文向大家介绍编写高性能Lua代码的方法，包括了编写高性能Lua代码的方法的使用技巧和注意事项，需要的朋友参考一下 前言 Lua是一门以其性能著称的脚本语言，被广泛应用在很多方面，尤其是游戏。像《魔兽世界》的插件，手机游戏《大掌门》《神曲》《迷失之地》等都是用Lua来写的逻辑。 所以大部分时候我们不需要去考虑性能问题。Knuth有句名言：“过早优化是万恶之源”。其意思就是过早优化是不必要的，会浪费
-
本章将介绍Rust编译器的参数。 Rust编译器程序的名字是rustc，使用它的方法很简单： $ rustc [OPTIONS] INPUT 其中，[OPTIONS]表示编译参数，而INPUT则表示输入文件。而编译参数有以下可选： -h, --help - 输出帮助信息到标准输出； --cfg SPEC - 传入自定义的条件编译参数，使用方法如 fn main() { if cfg!(he
-
我正在用docx4j做一些测试。我需要做的是将复杂的Word文档（2-3页的文本、表格、项目符号列表、图像）转换成XHTML。