前端进阶（12） - css 的弱化与 js 的强化

focusj 发布于2019-08-23 12:01 / 322人阅读

摘要：的弱化与的强化的三要素在前端组件化的过程中，比如等组件化框架的运用，使的弱化与的强化成为了一种趋势，而在这个过程中，其实还有另一种趋势也在慢慢形成的弱化与的强化。使用对象都是采用的这种写法。

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";

// 创建一个使用  标签的  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!

比如 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 对象 {}

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 = Radium(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 
      
        This is red.
      
      
        This turns red on hover.
      
      
        This turns red when the browser is less than 600px width.
      
      
        This is blue.
      
      
        This is blue and turns red when the browser is less than 600px width.
      
    ;
    }
}

这种写法的好处是，不需要 es6 的语法，对属性可以更方便的操作。

3. 决定是否使用

如果你是喜欢把样式和组件分开书写，那么这种方式就可能不太适合你；如果你追求一个组件对应一个文件、一个文件便是一个组件，那就立马用上吧。

4. 后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97854.html

前端进阶（12） - css 的弱化与 js 的强化

摘要：的弱化与的强化的三要素在前端组件化的过程中，比如等组件化框架的运用，使的弱化与的强化成为了一种趋势，而在这个过程中，其实还有另一种趋势也在慢慢形成的弱化与的强化。使用对象都是采用的这种写法。 css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中，比如 react、vue 等组件化框架的运用，使 html 的弱化与 js 的强化成为了一种趋...

Jackwoo 2019-08-30 15:54 评论0 收藏0
FE.CSS-Sultana后记：纯css也能写col,select,datepicker,caro

摘要：接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中，可以用变量解决，比如实现了宽度，高度圆点大小直径的控件。未完待续背景如今css3越来越发达，focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底，一点点ps技能，你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践，我发现自定义原生控件并不是什么难事，...

BigTomato 2019-08-29 15:17 评论0 收藏0
FE.CSS-Sultana后记：纯css也能写col,select,datepicker,caro

摘要：接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中，可以用变量解决，比如实现了宽度，高度圆点大小直径的控件。未完待续背景如今css3越来越发达，focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底，一点点ps技能，你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践，我发现自定义原生控件并不是什么难事，...

lanffy 2019-08-26 17:29 评论0 收藏0
FE.CSS-Sultana后记：纯css也能写col,select,datepicker,caro

摘要：接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中，可以用变量解决，比如实现了宽度，高度圆点大小直径的控件。未完待续背景如今css3越来越发达，focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底，一点点ps技能，你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践，我发现自定义原生控件并不是什么难事，...

张金宝 2019-08-02 10:22 评论0 收藏0