web
的三要素html, css, js
在前端组件化的过程中,比如react,vue等组件化框架的运用,使html 的弱化与 js 的强化
成为了一种趋势,而在这个过程中,其实还有另一种趋势也在慢慢形成:css 的弱化与 js 的强化
。
css in js
理念,即摒弃的英文原有的用.css
文件书写样式,而样式把写进js
里面,这样就可以做到一个组件对应一个文件,一个文件便是一个组件。
1.支持的第三方库
- styled-components:仅支持
react
- radium:仅支持
react
- 情感
- 阿芙罗狄蒂
- 光
- JSS
- 魅力四射:仅支持
react
- styled-jsx:仅支持
react
- 魅力:仅支持
react
- styletron:仅支持
react
更多第三方库可以参考css-in-js。
书写方式
一般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: 1.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);
这种写法的好处是,通过编辑器插件和lint插件(如stylelint),就像写正常的css一样,有自动完成提示,错误提示,lint自动矫正等功能。
2.2使用js对象 {}
镭,阿芙罗狄蒂,抛光,jss,魅力四射,魅力,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.决定是否使用
如果你是喜欢把样式和组件分开书写,那么这种方式就可能不太适合你;如果你追求一个组件对应一个文件,一个文件便是一个组件,那就立马用上吧。
在这里给大家分享一下,我是一名5年前端工程师,自己建了一个q群:731771211 ,群里不停更新最新的教程和学习方法,加入一起学习与交流