在 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等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候, 浏览器 ...
随机推荐
- httprunner(3)用脚手架快速搭建项目
前言 如何快速搭建一个httprunner项目呢?我们可以使用脚手架,脚手架就是自动地创建一些目录,形成一个项目的架构,不需要我们再手动的去创建 查看创建新项目的命令 先来查看一下帮助命令 httpr ...
- 【繁星Code】如何在EF将实体注释写入数据库中
最近在项目中需要把各个字段的释义写到数据库中,该项目已经上线很长时间了,数据库中的字段没有上千也有上百个,要是一个项目一个项目打开然后再去找对应字段查看什么意思,估计要到明年过年了.由于项目中使用En ...
- 2019 China Collegiate Programming Contest Qinhuangdao Onsite F. Forest Program(DFS计算图中所有环的长度)
题目链接:https://codeforces.com/gym/102361/problem/F 题意 有 \(n\) 个点和 \(m\) 条边,每条边属于 \(0\) 或 \(1\) 个环,问去掉一 ...
- 2019HDU多校 Round4
08 K-th Closest Distance 题意:询问区间l,r中与数p的距离为第k大的数 求这个距离 题解:很裸的主席树 二分答案 然后可以用主席数判断在这个区间内 一段值域内出现的数 之前没 ...
- Codeforces Round #697 (Div. 3) D. Cleaning the Phone (思维,前缀和)
题意:你的手机有\(n\)个app,每个app的大小为\(a_i\),现在你的手机空间快满了,你需要删掉总共至少\(m\)体积的app,每个app在你心中的珍惜值是\(b_i\),\(b_i\)的取值 ...
- 1561: (More) Multiplication
Description Educators are always coming up with new ways to teach math to students. In 2011, an educ ...
- Kafka SASL/SCRAM+ACL实现动态创建用户及权限控制
kafka系列文章 第一章 linux单机安装kafka 第二章 kafka--集群安裝部署(自带zookeeper) 第三章 Kafka SASL/SCRAM+ACL实现动态创建用户及权限控制 Ka ...
- C++ 结构体 segment fault
形如 struct node { int key; int height; int size; //tree node 个数 node *left, *right; node(int x) : key ...
- 基于OpenCV全景拼接(Python)SIFT/SURF
一.实验内容: 利用sift算法,实现全景拼接算法,将给定的两幅图片拼接为一幅. 二.实验环境: 主机配置: CPU :intel core i5-7300 2.50GHZ RAM :8.0GB 运行 ...
- (转载)RTMP协议中的AMF数据 http://blog.csdn.net/yeyumin89/article/details/7932585
为梦飞翔 (转载)RTMP协议中的AMF数据 http://blog.csdn.net/yeyumin89/article/details/7932585 这里有一个连接,amf0和amf3的库, ...