你即便不需要,但你可以。

注意:原文发表于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的更多相关文章

  1. 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件

    找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url ...

  2. 在html中引入css、js和jQuery的方法

    在html中引入css代码 在html中插入CSS样式表的方法有三种: 1.外部样式表(External style sheet):即所有的样式单独写在一个.css文件中,在html文件的head部分 ...

  3. php ci框架中载入css和js文件失败的原因及解决方法

    在将html页面整合到ci框架里面的时候,载入css和js失败. 原因是ci框架是入口的框架 对框架中文件的全部请求都须要经过index.php处理完毕,当载入外部的css和js文件的时候要使 用ba ...

  4. ASP.Net MVC4中封装CSS和js冗余代码(不让其大篇的显示在前台上)

    (1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用.   由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...

  5. html中插入css和js

    插入css: HTML周明华添加css样式的方法有很多种,常见的有一下几种:. 1.直接标签后添加如: <html> <div style="background:red; ...

  6. 去除web项目中的css、js缓存

    <link rel="stylesheet" type="text/css" href="~/Content/Home.css?param=Ma ...

  7. 在vue项目npm run build后,index.html中引入css和js 报MIME type问题

    问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...

  8. 网页中使用CSS和JS阻止用户选择内容

    CSS实现 body{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; ...

  9. .Net MVC中使用css 和js

    @section script { <script language="javascript"> </script> }

  10. HTML中css和js链接中的版本号

    背景 在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候, 浏览器 ...

随机推荐

  1. httprunner(3)用脚手架快速搭建项目

    前言 如何快速搭建一个httprunner项目呢?我们可以使用脚手架,脚手架就是自动地创建一些目录,形成一个项目的架构,不需要我们再手动的去创建 查看创建新项目的命令 先来查看一下帮助命令 httpr ...

  2. 【繁星Code】如何在EF将实体注释写入数据库中

    最近在项目中需要把各个字段的释义写到数据库中,该项目已经上线很长时间了,数据库中的字段没有上千也有上百个,要是一个项目一个项目打开然后再去找对应字段查看什么意思,估计要到明年过年了.由于项目中使用En ...

  3. 2019 China Collegiate Programming Contest Qinhuangdao Onsite F. Forest Program(DFS计算图中所有环的长度)

    题目链接:https://codeforces.com/gym/102361/problem/F 题意 有 \(n\) 个点和 \(m\) 条边,每条边属于 \(0\) 或 \(1\) 个环,问去掉一 ...

  4. 2019HDU多校 Round4

    08 K-th Closest Distance 题意:询问区间l,r中与数p的距离为第k大的数 求这个距离 题解:很裸的主席树 二分答案 然后可以用主席数判断在这个区间内 一段值域内出现的数 之前没 ...

  5. Codeforces Round #697 (Div. 3) D. Cleaning the Phone (思维,前缀和)

    题意:你的手机有\(n\)个app,每个app的大小为\(a_i\),现在你的手机空间快满了,你需要删掉总共至少\(m\)体积的app,每个app在你心中的珍惜值是\(b_i\),\(b_i\)的取值 ...

  6. 1561: (More) Multiplication

    Description Educators are always coming up with new ways to teach math to students. In 2011, an educ ...

  7. Kafka SASL/SCRAM+ACL实现动态创建用户及权限控制

    kafka系列文章 第一章 linux单机安装kafka 第二章 kafka--集群安裝部署(自带zookeeper) 第三章 Kafka SASL/SCRAM+ACL实现动态创建用户及权限控制 Ka ...

  8. C++ 结构体 segment fault

    形如 struct node { int key; int height; int size; //tree node 个数 node *left, *right; node(int x) : key ...

  9. 基于OpenCV全景拼接(Python)SIFT/SURF

    一.实验内容: 利用sift算法,实现全景拼接算法,将给定的两幅图片拼接为一幅. 二.实验环境: 主机配置: CPU :intel core i5-7300 2.50GHZ RAM :8.0GB 运行 ...

  10. (转载)RTMP协议中的AMF数据 http://blog.csdn.net/yeyumin89/article/details/7932585

    为梦飞翔   (转载)RTMP协议中的AMF数据 http://blog.csdn.net/yeyumin89/article/details/7932585 这里有一个连接,amf0和amf3的库, ...