web 的三要素 html, css, js 在前端组件化的过程中,比如 reactvue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势,而在这个过程中,其实还有另一种趋势也在慢慢形成:css 的弱化与 js 的强化

之前有写过一篇 CSS 模块化,但对 css in js 这种理念没有过多讲解,所以这次深入一下。

css in js 理念,即是摒弃原有的用 .css 文件书写样式,而把样式写进 js 里面,这样就可以做到一个组件对应一个文件、一个文件便是一个组件。

1. 支持的第三方库

  1. styled-components: 仅支持 react
  2. radium: 仅支持 react
  3. emotion
  4. aphrodite
  5. polished
  6. jss
  7. glamorous: 仅支持 react
  8. styled-jsx: 仅支持 react
  9. glamor: 仅支持 react
  10. styletron: 仅支持 react

更多第三方库可以参考 css-in-js

2. 书写方式

一般 css in js 的写法有两种:

  1. 使用 es6 的模板字符串
  2. 使用 js 对象 {}

2.1 使用 es6 的模板字符串

styled-componentsemotionstyled-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 对象 {}

radiumaphroditepolishedjssglamorousglamorstyletron 都是采用的这种写法。

比如 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 的强化(转)的更多相关文章

  1. 前端进阶(12) - css 的弱化与 js 的强化

    css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势, ...

  2. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

  3. 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/ ...

  4. 【CSS进阶】原生JS getComputedStyle等方法解析

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  5. [django]Django的css、image和js静态文件生产环境配置

    前言:在Django中HTML文件如果采用外联的方式引入css,js文件或者image图片,一般采用<link rel="stylesheet" href="../ ...

  6. animate.css配合wow.min.js实现各种页面滚动效果

    有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...

  7. css字体转换程序(Node.js)

    我下载的是ttf文件,css导入的文件有多种格式:eot,woff,svg 在windows下,需要寻找相应的exe文件来处理或者node.js来处理: ttf2eot: https://github ...

  8. css动画结束后 js无法修改translated值 .

    由于项目的需要,俺要做一些页面的转场动画. 即将是移动端,肯定是首先css动画了. 结果确发现,css动画中,如果设置animation-fill-mode: both;在动画结束后无法个性trans ...

  9. 将鼠标移到文本弹出一些字幕CSS达到,不及格JS达到

    使用css实施内容流行,否js代码,下面的代码,可直接使用复制, 需要背景图到下面的地址下载,谢谢! 住址:http://download.csdn.net/detail/zurich1979/722 ...

随机推荐

  1. linux CC攻击解决方法

    linux CC攻击1 由于不断的请求接口 导致带宽不足 然后不断的运行mysql语句 造成cpu饱和 这个时候服务器重负不堪 导致运行代码暖慢 导致入侵 一般采取的方法http://newmirac ...

  2. 配置git diff和git merge使用的第三方工具

    一般在运行git merge branchName后,git 如果提示了merger冲突,然后运行git mergetool.Git提示冲突后,运行git mergetool  --tool-help ...

  3. PAT 1098

    1098 Insertion or Heap Sort (25 分)   According to Wikipedia: Insertion sort iterates, consuming one ...

  4. mysql8.0安装时,Unable to connect to any of the specified MySQL hosts

    https://blog.csdn.net/u014776759/article/details/88422967

  5. IDEA配置类签名

  6. netcore发布失败

    2.2  发布Views  <MvcRazorCompileOnPublish>true</MvcRazorCompileOnPublish> 导致 发布失败--------- ...

  7. JQuery高级(一)

    JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing], ...

  8. @PropertySouce注解 读取 properties文件

    https://www.cnblogs.com/whx7762/p/7885735.html 1.@ProtertySource @PropertySouce是spring3.1开始引入的基于java ...

  9. Delphi中AssignFile函数

    procedure TForm1.SaveLog(sFlag:string;MSG:string);var QF1:Textfile;         ----声明文本文件类型 Qfiletmp,sP ...

  10. [SDOI2008]仪仗队(欧拉函数)

    题目 [SDOI2008]仪仗队 解析 这个题,我也不知道他们的soltion是怎么写的这么长的. 我们发现我们一次看一条直线上的第一个点,也就是说,若两个点斜率\(k=\frac{y}{x}\)相同 ...