前端進階（12） - css 的弱化與 js 的強化

focusj 發布于2019-08-23 12:01 / 344人閱讀

摘要：的弱化與的強化的三要素在前端組件化的過程中，比如等組件化框架的運用，使的弱化與的強化成為了一種趨勢，而在這個過程中，其實還有另一種趨勢也在慢慢形成的弱化與的強化。使用對象都是采用的這種寫法。

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)

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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