在 Svelte 中使用 CSS-in-JS
你即便不需要,但你可以。
注意:原文发表于2018-12-26,随着框架不断演进,部分内容可能已不适用。
CSS 是任何 Web 应用程序的核心部分。
宽泛而论,如果一个 UI 框架没有内置向组件添加样式的方式,那么它就是半成品。
这便是为何 Svelte 允许你在组件的 <style>
标签中添加 CSS 的缘故。
将 CSS 与标记共存,意味着我们可以解决开发人员在编写 CSS 时遇到的最大问题,在不引入新的问题的同时,还提供极佳的开发体验。
但是 Svelte 的样式处理确实存在一些限制,在组件之间共享样式或者应用级优化都艰难重重。
这些是我们计划在未来版本中解决的,不过与此同时,如果你亟需这些功能的话,你可以使用与框架无关的 CSS-in-JS 库。
示例
在这里,我们用 Emotion 来生成可以跨多个组件中使用的范围受限的类名:
App.svelte
<script>
import { comicSans, link } from './styles.js';
import Hero from './Hero.svelte';
</script>
<Hero/>
<div class={comicSans}>
<p>
Did you enjoy your lunch, mom? You drank it fast enough.
I know, I just call her Annabelle cause she's shaped like a…
she's the belle of the ball! YOU'RE the Chiclet! Not me.
Caw ca caw, caw ca caw, caw ca caw!
A Colombian cartel that WON'T kidnap and kill you.
You go buy a tape recorder and record yourself for a whole day.
<a class={link} href="https://bluthipsum.com/">I think you'll be surprised at some of your phrasing.</a>
</p>
</div>
Hero.svelte
<script>
import { title, comicSans, box } from './styles.js';
</script>
<div class="{title} {comicSans}">
<h1>
<div class={box}>
<div class={box}>
<div class={box}>CSS</div>
in JS
</div>
in HTML
</div>
</h1>
</div>
styles.js
import emotion from 'emotion/dist/emotion.umd.min.js';
const { css } = emotion;
const brand = '#74D900';
export const title = css`
color: ${brand};
font-size: 1em;
white-space: nowrap;
`;
export const comicSans = css`
font-family: 'Comic Sans MS', cursive;
`;
export const box = css`
position: relative;
display: inline-block;
border: 2px solid ${brand};
line-height: 1;
padding: 4px;
border-radius: 4px;
`;
export const link = css`
color: inherit;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid ${brand};
&:hover {
text-decoration: none;
background: ${brand};
}
`;
不过一定要提醒你的是,大多数的 CSS-in-JS 库都有一个运行时,许多库在构建时,不支持将样式静态提取到单独的 .css
文件中(这对于获取最佳性能至关重要)。
因此,仅在你的应用有迫切需要时才建议使用 CSS-in-JS!
请注意,你也可以混合搭配 CSS-in-JS 和 Svelte 内置的 CSS 处理两者一起使用。
在 Svelte 中使用 CSS-in-JS的更多相关文章
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url ...
- 在html中引入css、js和jQuery的方法
在html中引入css代码 在html中插入CSS样式表的方法有三种: 1.外部样式表(External style sheet):即所有的样式单独写在一个.css文件中,在html文件的head部分 ...
- php ci框架中载入css和js文件失败的原因及解决方法
在将html页面整合到ci框架里面的时候,载入css和js失败. 原因是ci框架是入口的框架 对框架中文件的全部请求都须要经过index.php处理完毕,当载入外部的css和js文件的时候要使 用ba ...
- ASP.Net MVC4中封装CSS和js冗余代码(不让其大篇的显示在前台上)
(1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用. 由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...
- html中插入css和js
插入css: HTML周明华添加css样式的方法有很多种,常见的有一下几种:. 1.直接标签后添加如: <html> <div style="background:red; ...
- 去除web项目中的css、js缓存
<link rel="stylesheet" type="text/css" href="~/Content/Home.css?param=Ma ...
- 在vue项目npm run build后,index.html中引入css和js 报MIME type问题
问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...
- 网页中使用CSS和JS阻止用户选择内容
CSS实现 body{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; ...
- .Net MVC中使用css 和js
@section script { <script language="javascript"> </script> }
- HTML中css和js链接中的版本号
背景 在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候, 浏览器 ...
随机推荐
- 漫画 | CPU战争40年,真正的王者终于现身!
上个世纪70年代,内存又慢又贵, 程序员得想尽一切办法节省内存. 那个时代的编译器也比较差劲 所以,70年代的程序员几乎都写得一手好汇编. 为了帮助程序员写好汇编,这个时候的CPU也有意把指令集做了增 ...
- 浅谈Webpack模块打包工具一
为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁 开发阶段把散的模块打包成一个模块 解决网络请 ...
- Manacher(马拉车)算法详解
给定一个字符串,求出其最长回文子串 eg: abcba 第一步: 在字符串首尾,及各字符间各插入一个字符(前提这个字符未出现在串里). 如 原来ma /* a b a b c ...
- POJ1113:Wall (凸包算法学习)
题意: 给你一个由n个点构成的多边形城堡(看成二维),按顺序给你n个点,相邻两个点相连. 让你围着这个多边形城堡建一个围墙,城堡任意一点到围墙的距离要求大于等于L,让你求这个围墙的最小周长(看成二维平 ...
- P1020 导弹拦截(LIS)
题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹 ...
- spark 一、编程指南
总览 第一.每个spark 应用都有一个驱动程序去运行着主函数和再每个节点上的并行操作. spark提供了一个RDD(弹性分布式数据集)的数据集合,可以通过不同的节点并行操作运算,可以通过hdfs文件 ...
- 一些CTF题目--20/9/3
1. 看源码 POST方法.Extract覆盖. 直接url ?参数不行,因为POST参数不在URL上,GET参数才在 Burpsuite抓包,改成 pass=1&thepassword_1 ...
- 还傻傻分不清楚equals和==的区别吗?看完就明白了
解决一个问题的最好方法就是发现一个问题产生的根源,即发现最本质的东西,再去解决它. Java语言里面的equals()方法是交给开发者们自己去覆盖重写编写功能的,即让开发者去定义当满足什么条件时,两个 ...
- 恕我直言!!!对于Maven,菜鸟玩dependency,神仙玩plugin
打包是一项神圣.而庄严的工作.package意味着我们离生产已经非常近了.它会把我们之前的大量工作浓缩成为一个.或者多个文件.接下来,运维的同学就可以拿着这些个打包文件在生产上纵横四海了. 这么一项庄 ...
- CSS字体大小: em与px、pt、百分比之间的对比
CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的 ...