日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

這同樣適用于本文之后的構(gòu)造樣式(Myth 5：給組件設(shè)置條件樣式更簡單)。styled-components 只是在多數(shù)基本組件的情況下稍勝一籌。

Myth 3：styled-components 使人更關(guān)注語義化

前提就不對。樣式和語義化代表著不同的問題，需要不用的應(yīng)對方案。引用 Adam Morse(mrmrs)的話：

內(nèi)容語義化和視覺樣式 沒有半點關(guān)系。當(dāng)我用樂高建造東西時，我從來不會想“這是引擎的一部分”，我想著“這是個 1×4 的藍色樂高，我用來隨便做什么都行”。不論水下潛水基地還是飛機——我清晰地知道怎么用這個樂高塊。

– http://mrmrs.io/writing/2016/03/24/scalable-css/

(強烈建議讀一讀 Adam 關(guān)于 可拓展 CSS 的文章)

我們還可以舉個例子看看兩者是否相關(guān)。

示例：

 
 
 

  
  
  

  
  
  

  
  
  
  
  
  
  

  
  
  
    Foo
  
  
  

  
  
  
    Bar
  
  
  

  
  
  
  
  
  
  

  
  
  
 
 
 
 

語義化是要使用正確的標(biāo)簽構(gòu)造標(biāo)記。你能知道這些組件會渲染成什么 HTML 標(biāo)簽嗎?不，你不知道。

和下面這段代碼比較下：

 
 
 

  
  
  

  
  
  

  
  
  
  

  
  
  

  
  
  
    Foo
  
  
  

  
  
  
    Bar
  
  
  

  
  
  
  
  
  
  

  
  
  
 
 
 
 

Myth 4：拓展樣式更容易

v1 版本可以用 styled(StyledComponent) 拓展樣式;v2 引進了 extend 方法來拓展已存在的樣式，比如：

 
 
 

  
  
  
const Button = styled.button`
  
  
  

  
  
  
  padding: 10px;
  
  
  

  
  
  
`;
  
  
  

  
  
  
const TomatoButton = Button.extend`
  
  
  

  
  
  
  color: #f00;
  
  
  

  
  
  
`; 
 
 
 

這挺好。但是你可以在 CSS 中完成(或者使用 CSS 模塊組合 或 SASS 繼承混合 @extend)。

 
 
 

  
  
  
button {
  
  
  

  
  
  
  padding: 10px;
  
  
  

  
  
  
}
  
  
  

  
  
  
button.tomato-button {
  
  
  

  
  
  
  color: #f00;
  
  
  

  
  
  
} 
 
 
 

難道不比 JavaScript 簡單?

Myth 5：給組件設(shè)置條件樣式更簡單

這點是說你可以根據(jù)組件屬性給組件設(shè)置樣式，比如：

這在 React 中很有用。畢竟組件行為就是由屬性控制的。給屬性值直接綁定樣式有意義嗎?可能吧。但是來看看組件的實現(xiàn)代碼：

 
 
 

  
  
  
styled.Button`
  
  
  

  
  
  
  background: ${props => props.primary ? '#f00' : props.secondary ? '#0f0' : '#00f'};
  
  
  

  
  
  
  color: ${props => props.primary ? '#fff' : props.secondary ? '#fff' : '#000'};
  
  
  

  
  
  
  opacity: ${props => props.active ? 1 : 0};
  
  
  

  
  
  
`; 
 
 
 

利用 JavaScript 按條件創(chuàng)造樣式表是挺強大的，但是這也意味著樣式難以理解，對比以下 CSS：

 
 
 

  
  
  
button {
  
  
  

  
  
  
  background: #00f;
  
  
  

  
  
  
  opacity: 0;
  
  
  

  
  
  
  color: #000;
  
  
  

  
  
  
}
  
  
  

  
  
  
button.primary,
  
  
  

  
  
  
button.seconary {
  
  
  

  
  
  
  color: #fff;
  
  
  

  
  
  
}
  
  
  

  
  
  
button.primary {
  
  
  

  
  
  
  background: #f00;
  
  
  

  
  
  
}
  
  
  

  
  
  
button.secondary {
  
  
  

  
  
  
  background: #0f0;
  
  
  

  
  
  
}
  
  
  

  
  
  
button.active {
  
  
  

  
  
  
  opacity: 1;
  
  
  

  
  
  
} 
 
 
 

這樣 CSS 更簡短(229 VS 222 字符)，(個人認為)也更容易理解。此外，還可以用預(yù)處理器使 CSS 分組、更短：

 
 
 

  
  
  
button {
  
  
  

  
  
  
  background: #00f;
  
  
  

  
  
  
  opacity: 0;
  
  
  

  
  
  
  color: #000;
  
  
  

  
  
  
  
  
  
  

  
  
  
  &.primary,
  
  
  

  
  
  
  &.seconary {
  
  
  

  
  
  
    color: #fff;
  
  
  

  
  
  
  }
  
  
  

  
  
  
  &.primary {
  
  
  

  
  
  
    background: #f00;
  
  
  

  
  
  
  }
  
  
  

  
  
  
  &.secondary {
  
  
  

  
  
  
    background: #0f0;
  
  
  

  
  
  
  }
  
  
  

  
  
  
  &.active {
  
  
  

  
  
  
    opacity: 1;
  
  
  

  
  
  
  }
  
  
  

  
  
  
} 
 
 
 

Myth 6：有利于代碼組織

有些人告訴我他們喜歡 styled-components，因為它可以讓樣式和 JavaScript 在一個文件中。

我理解同一組件有許多文件很煩，但是把樣式和標(biāo)記塞進一個文件的方法很糟糕。這樣不僅版本控制難以回溯，而且所有組件都需要滾動很長一段距離，而不是簡單地點下按鈕。

如果一定要把 CSS 和 JavaScript 放在一個文件中， 可以考慮使用 css-literal-loader。它可以在 build 時用 extract-text-webpack-plugin 提取 CSS，用標(biāo)準(zhǔn) loader 配置處理 CSS。

Myth 7：DX 很方便，這工具太棒了!

很明顯你沒用過 styled-components。

• 一旦樣式寫錯了，整個 app 會崩潰，并輸出長長的調(diào)用棧錯誤(v2 更奇葩)。相比之下，CSS “style error” 只是元素渲染地不對而已。
• 元素沒有 className，所以調(diào)試時不得不去對比 React 元素樹和 DevTools DOM 樹(v2 可以用 babel-plugin-styled-components 定位)。
• 沒有語法檢查(有一款 樣式檢查插件 正在開發(fā)中)。
• 不合法的樣式會被忽略(比如：clear: both; float left; color: #f00; 不會報 error 或 warning，只能祈禱調(diào)試好運了，即使看了 styled-components 源碼，還是花了我 15 分鐘查看調(diào)用棧。最后我在聊天中把代碼粘出來尋求幫助，才有人提醒是少了:。你注意到了嗎?)
• 支持語法高亮、代碼補全以及其它 IDE 細節(jié)的 IDE并不多。如果你在金融或政府機構(gòu)工作，很可能無法使用 Atom IDE。

Myth 8：性能更好，bundle 更小

• 事實是，styled-components 無法提取靜態(tài) CSS 文件(比如使用 https://github.com/webpack-contrib/extract-text-webpack-plugin)。這意味著瀏覽器無法開始解釋樣式直到 styled-components 解析、加載到 DOM上。
• 缺少文件分離意味著無法分開緩存 CSS 和 JavaScript。
• 所有樣式化的組件都會額外包裝一層 HoC。這是不必要的性能損耗。因為類似的結(jié)構(gòu)缺陷，我終止了 https://github.com/gajus/react-css-modules(但創(chuàng)建了 https://github.com/gajus/babel-plugin-react-css-modules)。
• 因為 HOC，如果在服務(wù)端渲染，會導(dǎo)致標(biāo)記文檔大很多。
• 有 keyframes， 我也不需要用動態(tài)樣式值做動畫。

Myth 9：它可以開發(fā)響應(yīng)式組件

這說的是依據(jù)環(huán)境給組件設(shè)置樣式的能力，比如父容器偏移量、子元素數(shù)量等。

首先，styled-components 和響應(yīng)式?jīng)]什么關(guān)系。這已經(jīng)超出了這個主題的范圍。這種情況最好直接設(shè)置組件的 style，以避免額外的成本。

但是，元素查詢是個有趣的問題，也逐漸成為 CSS 中的一個高熱話題，主要是 EQCSS 等類似項目。元素查詢和 @media queries 在語法上很相似，只是元素查詢操作具體某些元素。

 
 
 

  
  
  
@element {selector} and {condition} [ and {condition} ]* { {css} }
 
 
 

{selector} 是 CSS 選擇器對應(yīng)著一或多個元素。例如：#id 或 .class

{condition} 由尺寸和值組成。

{css} 可以包含：任何合法的 CSS 規(guī)則。(例如：#id div { color: red })

元素查詢可以用 min-width、max-width、min-height、max-height、min-characters、max-characters、min-children、max-children、min-lines、max-lines、min-scroll-x、max-scoll-x 等 (詳見 http://elementqueries.com/)條件給元素設(shè)置樣式。

總有一天類似 EQCSS 的內(nèi)容也會出現(xiàn)在 CSS 標(biāo)準(zhǔn)中的(希望如此)。

等下!

大部分內(nèi)容都長期有效，無論是社區(qū)、React 變更或 styled-components 本身。但意義何在?CSS 已被廣泛支持，有大量的社區(qū)，也確實行之有效。

本文的目的并不是阻止讀者在 JavaScript 中使用“CSS”或是 styled-components。styled-components 一個很棒的使用場景是：更好的跨平臺支持性。不要因為錯誤的理由使用它。

那么我們應(yīng)該用什么呢?

使用 Shadow DOM v1 還為時尚早(51% 支持率)。CSS 應(yīng)遵循命名協(xié)議(建議 BEM)，如果擔(dān)心類名沖突(或懶得用 BEM)，可以用 CSS modules。如果你在開發(fā) React web，考慮用 babel-plugin-react-css-modules。如果在開發(fā) React Native，styled-components 更好。