「譯文」：CSS-in-JS 你所應該知道的一切

時間 2019-11-08

標籤譯文 css 應該知道一切欄目 CSS 简体版

原文原文鏈接

CSS-in-JS 你所應該知道的一切

用組件的方式進行思考 - 你再也不須要維護一堆樣式表。 CSS-in-JS將CSS模型抽象到組件級別，而不是文檔級別（模塊化）。css

React 組件示例：html

import React, { Component } from 'react'
import styled from 'styled-components'

const Wrapper = styled.div` background: black `
const Title = styled.h1` background: white `
class App extends Component {
    render() {
        return (
          <Wrapper> <Title>Hello Styled Components!</Title> </Wrapper>
        )
    }
}

export default App
複製代碼

你極可能聽過像CSS-in-JS, Styled Components,Radium, 和Aphrodite，你能夠也會想，這和我有什麼關係？我很是樂於寫CSS-in-CSS(純.css文件)。前端

我來講一下這些爲何和你有關，但願至少能懂得概念，瞭解爲何和你有關。話雖如此，請隨意使用CSS-in-CSS。你沒有義務使用CSS-in-JS。不管什麼最適合你，讓你很爽，老是可以提供最好的解決方案！react

CSS-in-JS是一個微妙而有爭議的話題。我主張開放的思想，並考慮這是否對你有意義。問問本身，「它會改善個人工做流程嗎？」最後，惟一重要的是使用能讓你更快樂，更高效的工具。git

我老是以爲難以維護一個巨大的樣式表文件夾。我想嘗試不一樣的方法。我見過不少人問是否有新的造型想法。到目前爲止，CSS-in-JS是最好的概念。github

讓咱們一塊兒看下CSS-in-JS:瀏覽器

中小型項目的 CSS服務器

1.什麼是CSS-in-JS？

JSS是一種比CSS更強大的抽象。它使用JavaScript做爲語言以聲明和可維護的方式描述樣式。它是一個高性能的JS到CSS編譯器，它在運行時和服務器端工做。這個核心庫是低級別和框架無關的。它大約是6KB（縮小和壓縮），而且能夠經過插件API進行擴展。 - 來源網絡

必定要銘記，行內樣式和CSS-in-JS徹底不一樣，以下圖所示：app

1.1 行內樣式如何工做？

在瀏覽器中，這將附加到DOM節點，以下所示：

<span style="color: green">inline style</span>
複製代碼

1.2 CSS-in-JS如何工做？

在瀏覽器中，這將附加到DOM節點，以下所示：

<style> .jss-xxx-green{ color: green } </style>

<span class='jss-xxx-green'>inline style</span>
複製代碼

1.3不一樣點：

看到細微的區別？ CSS-in-JS在DOM的頂部附加了一個<style>標記，而內聯樣式只是將屬性附加到DOM節點。爲何這很重要？

並不是全部CSS功能均可以使用JavaScript事件處理程序。許多僞選擇器（如：disabled，：before，：nth-child）是不可能的，不支持樣式化html和body標籤等。

使用CSS-in-JS，您能夠輕鬆得到CSS的全部功能。因爲生成了實際的CSS，所以您可使用您能想到的每一個媒體查詢和僞選擇器。一些庫（如jss，樣式組件）甚至添加了對嵌套的整潔，非CSS原生特性的支持！

爲何咱們不使用CSS-in-CSS並完成它？

雖然長期以來一直如此，但挑戰在於現代網絡是用組件而不是頁面編寫的。

CSS實際上從未實現過基於組件的方法。 CSS-in-JS正好解決了這個問題。

2.使用`CSS-in-JS`有什麼好處？

組件化思考。你再也不須要維護一堆樣式表。 CSS-in-JS將CSS模型抽象到組件級別，而不是文檔級別（模塊化）。
CSS-in-JS利用JavaScript生態系統的所有功能來加強CSS。
真正的規則隔離。範圍選擇器是不夠的。若是沒有明肯定義，CSS具備從父元素自動繼承的屬性。感謝jss-isolate插件，JSS規則不會繼承屬性。
範圍選擇器。 CSS只有一個全局命名空間。在非平凡的應用程序中不可能避免選擇器衝突。命名約定（如BEM）可能在一個項目中有所幫助，但在集成第三方代碼時無效。當JSS將JSON表示編譯爲CSS時，JSS默認生成惟一的類名。
自動添加前綴。CSS規則自動以provider爲前綴，所以您沒必要考慮它。
代碼共享。輕鬆地在JS和CSS之間共享常量和函數。
只有屏幕上當前使用的樣式位於DOM（react-jss）中。
消除未使用代碼
CSS單元測試