css 的弱化与 js 的强化(转)
web
的三要素 html, css, js
在前端组件化的过程中,比如 react、vue 等组件化框架的运用,使 html 的弱化与 js 的强化
成为了一种趋势,而在这个过程中,其实还有另一种趋势也在慢慢形成:css 的弱化与 js 的强化
。
之前有写过一篇 CSS 模块化,但对 css in js
这种理念没有过多讲解,所以这次深入一下。
css in js
理念,即是摒弃原有的用 .css
文件书写样式,而把样式写进 js
里面,这样就可以做到一个组件对应一个文件、一个文件便是一个组件。
1. 支持的第三方库
- styled-components: 仅支持
react
- radium: 仅支持
react
- emotion
- aphrodite
- polished
- jss
- glamorous: 仅支持
react
- styled-jsx: 仅支持
react
- glamor: 仅支持
react
- styletron: 仅支持
react
更多第三方库可以参考 css-in-js。
2. 书写方式
一般 css in js
的写法有两种:
- 使用
es6
的模板字符串 - 使用 js 对象
{}
2.1 使用 es6
的模板字符串
styled-components、emotion、styled-jsx 都是采用的这种写法。
比如 styled-components
:
import React from 'react';
import styled from 'styled-components'; // 创建一个使用 <h1> 标签的 <Title> React 组件
const Title = styled.h1`
font-size: .5em;
text-align: center;
color: palevioletred;
`; // 创建一个使用 <section> 标签的 <Wrapper> React 组件
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`; // 就像正常的 React 组件一样,只不过他们都自带样式
<Wrapper>
<Title>Hello World, this is my first styled component!</Title>
</Wrapper>
比如 emotion
:
import { css } from 'emotion'; const app = document.getElementById('root');
const myStyle = css`
color: rebeccapurple;
`;
app.classList.add(myStyle);
2.2 使用 js 对象 {}
radium、aphrodite、polished、jss、glamorous、glamor、styletron 都是采用的这种写法。
比如 radium
:
import Radium from 'radium';
import React from 'react';
import color from 'color'; var styles = {
base: {
color: '#fff',
':hover': {
background: color('#0074d9').lighten(0.2).hexString()
}
},
primary: {
background: '#0074D9'
},
warning: {
background: '#FF4136'
}
}; class Button extends React.Component {
render() {
return (
<button
style={[styles.base, styles[this.props.kind]]}>
{this.props.children}
</button>
);
}
} Button = Radium(Button); <Button kind="primary">Primary</Button>
<Button kind="warning">Warning</Button>
比如 aphrodite
:
import React, { Component } from 'react';
import { StyleSheet, css } from 'aphrodite'; const styles = StyleSheet.create({
red: {
backgroundColor: 'red'
},
blue: {
backgroundColor: 'blue'
},
hover: {
':hover': {
backgroundColor: 'red'
}
},
small: {
'@media (max-width: 600px)': {
backgroundColor: 'red',
}
}
}); class App extends Component {
render() {
return <div>
<span className={css(styles.red)}>
This is red.
</span>
<span className={css(styles.hover)}>
This turns red on hover.
</span>
<span className={css(styles.small)}>
This turns red when the browser is less than 600px width.
</span>
<span className={css(styles.red, styles.blue)}>
This is blue.
</span>
<span className={css(styles.blue, styles.small)}>
This is blue and turns red when the browser is less than 600px width.
</span>
</div>;
}
}
这种写法的好处是,不需要 es6
的语法,对属性可以更方便的操作。
3. 决定是否使用
如果你是喜欢把样式和组件分开书写,那么这种方式就可能不太适合你;如果你追求一个组件对应一个文件、一个文件便是一个组件,那就立马用上吧。
4. 后续
转载自 https://segmentfault.com/a/1190000016422897
css 的弱化与 js 的强化(转)的更多相关文章
- 前端进阶(12) - css 的弱化与 js 的强化
css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势, ...
- CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器
CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...
- switchable css dark theme in js & html custom element
switchable css dark theme in js & html custom element dark theme / dark mode https://codepen.io/ ...
- 【CSS进阶】原生JS getComputedStyle等方法解析
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- [django]Django的css、image和js静态文件生产环境配置
前言:在Django中HTML文件如果采用外联的方式引入css,js文件或者image图片,一般采用<link rel="stylesheet" href="../ ...
- animate.css配合wow.min.js实现各种页面滚动效果
有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...
- css字体转换程序(Node.js)
我下载的是ttf文件,css导入的文件有多种格式:eot,woff,svg 在windows下,需要寻找相应的exe文件来处理或者node.js来处理: ttf2eot: https://github ...
- css动画结束后 js无法修改translated值 .
由于项目的需要,俺要做一些页面的转场动画. 即将是移动端,肯定是首先css动画了. 结果确发现,css动画中,如果设置animation-fill-mode: both;在动画结束后无法个性trans ...
- 将鼠标移到文本弹出一些字幕CSS达到,不及格JS达到
使用css实施内容流行,否js代码,下面的代码,可直接使用复制, 需要背景图到下面的地址下载,谢谢! 住址:http://download.csdn.net/detail/zurich1979/722 ...
随机推荐
- linux CC攻击解决方法
linux CC攻击1 由于不断的请求接口 导致带宽不足 然后不断的运行mysql语句 造成cpu饱和 这个时候服务器重负不堪 导致运行代码暖慢 导致入侵 一般采取的方法http://newmirac ...
- 配置git diff和git merge使用的第三方工具
一般在运行git merge branchName后,git 如果提示了merger冲突,然后运行git mergetool.Git提示冲突后,运行git mergetool --tool-help ...
- PAT 1098
1098 Insertion or Heap Sort (25 分) According to Wikipedia: Insertion sort iterates, consuming one ...
- mysql8.0安装时,Unable to connect to any of the specified MySQL hosts
https://blog.csdn.net/u014776759/article/details/88422967
- IDEA配置类签名
- netcore发布失败
2.2 发布Views <MvcRazorCompileOnPublish>true</MvcRazorCompileOnPublish> 导致 发布失败--------- ...
- JQuery高级(一)
JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing], ...
- @PropertySouce注解 读取 properties文件
https://www.cnblogs.com/whx7762/p/7885735.html 1.@ProtertySource @PropertySouce是spring3.1开始引入的基于java ...
- Delphi中AssignFile函数
procedure TForm1.SaveLog(sFlag:string;MSG:string);var QF1:Textfile; ----声明文本文件类型 Qfiletmp,sP ...
- [SDOI2008]仪仗队(欧拉函数)
题目 [SDOI2008]仪仗队 解析 这个题,我也不知道他们的soltion是怎么写的这么长的. 我们发现我们一次看一条直线上的第一个点,也就是说,若两个点斜率\(k=\frac{y}{x}\)相同 ...