資訊專欄INFORMATION COLUMN
摘要：群里聽達峰大大講用的是的方案留了個心眼之前查看過一些方案大致看過不知道哪個比較好但是既然有實踐經驗而且當時也是我看中的幾個之一覺得比較安全從寫法上看侵入性比較小直接就是然后生成的是基于的包裹的插入在當中的這樣運行時甚至熱替換時沒有什么問
群里聽達峰大大講 Strikingly 用的是 emotion 的方案, 留了個心眼.
之前查看過一些 CSS in JS 方案, 大致看過 emotion, 不知道哪個比較好:
https://github.com/MicheleBer...
但是既然 Strikingly 有實踐經驗, 而且當時也是我看中的幾個之一, 覺得比較安全.
https://github.com/emotion-js...
從寫法上看, 侵入性比較小, 直接就是 className:
import styled, { css } from "react-emotion";
const Container = styled("div")`
background: #333;
`
const myStyle = css`
color: rebeccapurple;
`
const app = () => (
Hello World
);
然后生成的 CSS 是基于 hash 的 className 包裹的, 插入在 當中的.
這樣運行時甚至熱替換時沒有什么問題的.
另一個關注的方面是打包, 也就是將 CSS 從 js 種抽出來重新變成 CSS 文件.
emotion 給出的方案是用 babel plugin 強行生成文件, 然后配合 Webpack 打包:
https://github.com/emotion-js...
沒有看具體的細節, 從原理上是行得通的.
最近整理了一個 demo 出來, 完成了基本的開發和打包功能:
https://github.com/minimal-xy...
有些坑吧, 比如打包過程生成的 CSS 文件是寫在 src/ 當中的, 和源碼在一起,
有點臟, 我后面寫了 xarg 的命令行強行在打包結束給刪除掉了.
關于編輯器的支持, 目前我用的是 VS Code, 需要語法高亮和自動提示,
https://marketplace.visualstu...
https://github.com/Microsoft/...
注意后面這個 plugin 需要本地安裝 TypeScript 并且切換版本到 2.6.1+, 我配置成功了.
另外由于前面搭配了 Prettier, 自動格式化也是搞定的.
另一個擔心的問題是對 CSS 某些兄弟元素/父子元素的選擇關系,
還沒有足夠深入去挖這些問題. 大致上覺得是可以可靠的方案. 后面要等 Strikingly 分享...
相關的內容在 issues 上詢問了作者, 關于 emotion 抽取成獨立文件的細節.
使用當中發現一個問題, 就是有些樣式在抽象之后丟失了.
代碼時存在的, 問題在于代碼 className 的順序不再影響樣式了,
動態運行的 emotion 會根據 className 順序來處理樣式的合并, 抽取后沒法生效.
維護團隊給出的方案是不抽取... 性能可以接受的情況下我覺得還好...
但是總歸是一個坑.
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112705.html
摘要：解析時，樣式組件將生成唯一的類名，并將注入。在星，由創建，被定義為組件樣式的工具鏈。它具有可預測的組合，以避免的特殊性問題。將該項目定義為組件樣式通過優雅靈感解決，占地面積小小于，以及出色的性能。 一個特別有趣的概念是在CSS中使用JS將CSS抽象到組件級別本身，使用JavaScript以聲明性和可維護的方式描述樣式。所以，我們已經列出了一些有用的項目來開始。 您還可以閱讀這個推薦的討...
摘要：解析時，樣式組件將生成唯一的類名，并將注入。在星，由創建，被定義為組件樣式的工具鏈。它具有可預測的組合，以避免的特殊性問題。將該項目定義為組件樣式通過優雅靈感解決，占地面積小小于，以及出色的性能。 一個特別有趣的概念是在CSS中使用JS將CSS抽象到組件級別本身，使用JavaScript以聲明性和可維護的方式描述樣式。所以，我們已經列出了一些有用的項目來開始。 您還可以閱讀這個推薦的討...
閱讀 2417·2021-08-18 10:21
閱讀 2526·2019-08-30 13:45
閱讀 2158·2019-08-30 13:16
閱讀 2117·2019-08-30 12:52
閱讀 1366·2019-08-30 11:20
閱讀 2627·2019-08-29 13:47
閱讀 1626·2019-08-29 11:22
閱讀 2762·2019-08-26 12:11
